Скрыть элемент, но показать сгенерированный CSS контент

Question

Есть ли способ скрыть содержимое элемента, но сохранить его содержимое :before видимым? Скажем, у меня есть следующий код:

HTML:

<span class="addbefore hidetext">You are here</span>

CSS:

.addbefore:before {
    content: "Show this";
}
.hidetext {
    // What do I do here to hide the content without hiding the :before content?
}

Я пробовал:

• с использованием display: none и установкой display: inline на :before, но оба они по-прежнему скрыты
• с использованием width: 0; overflow: hidden ;, но затем, кажется, добавляется дополнительное пространство (?)
• с использованием color: transparent ;, но, конечно, содержимое диапазона все еще занимает пространство
• с использованием text-indent: -....px, но
  1. это осуждается поисковыми системами и
  2. кажется, что не работает для элементов span (?)

Есть другие идеи, как мне это сделать?

Answer 1

Чистый раствор

Вы можете использовать visibility: hidden, но с этим решением скрытый контент все равно будет занимать место . Если это не имеет значения для вас, вот как вы это сделаете:

span {
    visibility: hidden;
}

span:before {
    visibility: visible;
}

---

Hackish Альтернативное решение

Другим решением было бы установить font-size диапазона в ноль * в действительно маленькое значение. Преимущество этого метода: скрытый контент не займет места. Недостаток: вы не сможете использовать относительные единицы измерения, такие как em или%, для размера шрифта содержимого :before.

span:before {
    content: "Lorem ";
    font-size: 16px;
    font-size: 1rem; /* Maintain relative font-size in browsers that support it */
    letter-spacing: normal;
    color: #000;
}

span {
    font-size: 1px;
    letter-spacing: -1px;
    color: transparent;
}

Пример для jsfiddle.

Обновление (4 мая 2015 г.): В CSS3 теперь вы можете использовать модуль rem (Root EM) для поддержания относительных размеров шрифта в элементе :before. (поддержка браузера.)

---

* В предыдущей версии этого поста предлагалось установить нулевой размер шрифта. Однако это не работает должным образом в некоторых браузерах, потому что CSS не определяет, какое поведение ожидается , когда размер шрифта установлен равным нулю . Для кросс-браузерной совместимости используйте маленький размер шрифта, как указано выше.

Answer 2

Для лучшей поддержки браузера:

Оберните текст, который должен быть скрыт в дополнительном элементе span, и примените классы к этому промежутку, чтобы скрыть текст, который вы хотите скрыть.

HTML:

<span class="addbefore">
  <span class="visuallyhidden>This text will not show.</span>
</span>

CSS:

.addbefore:before {
  content: "Show this";
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

Класс .visuallyhidden, используемый выше, взят из текущей версии HTML5 Boilerplate : https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css

Преимущества этого решения:

• Семантический HTML
• Полная поддержка браузера
• Нет проблем с крошечным текстом, как другие мелкиеfont-size решений.
• Скрытый контент не займет места

Смотрите его в действии здесь: http://jsfiddle.net/tinystride/A9SSb/

Answer 3

Опираясь на отличный хак @ anroesti, вот решение, если вам нужно применять в неизвестном контексте с точки зрения размера и цвета шрифта, т.е. вы не уверены, что сброс на color:black;font-size:1rem; не испортит ситуацию:

<span abbrev-content="Intl.">International</span>

@media only screen and (max-width: 700px) {  /* very narrow viewports */
    span[abbrev-content] { font-size: 0.001em; visibility: hidden; }
    span[abbrev-content]::before { 
        content: attr(abbrev-content); 
        font-size: 1000em; 
        visibility: visible; 
    }
}

Если ваш диапазон содержит абзац, а не просто слово, вам также может понадобиться отрицательный межбуквенный интервал.

Answer 4

Я применил аналогичный подход, предложенный здесь, с visibility, но в нем все еще есть поле содержимого.

Мое решение состоит в том, чтобы просто использовать font-size, чтобы скрыть целевой текст.

span {
    font-size: 0;
}

span:before {
    font-size: 16px;
}

Answer 5

Я не думаю, что это возможно с чистым CSS и HTML. Глядя на этот пример http://jsbin.com/efeco4, вы увидите, что то, что находится внутри content свойства css, обернуто элементом. Таким образом, любые манипуляции с элементом также будут влиять на css content.

Поэтому альтернативной идеей может быть использование jquery для очистки содержимого html внутри тега div с классом hidetext без влияния на content из css. Пример кода может быть таким:

$('.hidetext').empty();

Пример: http://jsbin.com/efeco4/2