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

Есть ли способ скрыть содержимое элемента, но сохранить его содержимое :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;, но затем добавляется дополнительное пространство (?)
используя цвет: прозрачный;, но тогда, конечно, содержимое диапазона по-прежнему занимает пространство
используя text-indent: -....px, но
- это недоволен поисковыми системами и
- Кажется, что он не работает для элементов span (?)

Любые другие идеи относительно того, как я могу это сделать?

Ответы

Ответ 1

Чистое решение

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

span {
    visibility: hidden;
}

span:before {
    visibility: visible;
}

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

Другим решением было бы установить font-size span ~~на нуль~~ * на действительно небольшое значение. Преимущество этого метода: скрытый контент не займет места. Недостаток: вы не сможете использовать относительные единицы, например 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 не определяет, какое поведение ожидается когда размер шрифта установлен на ноль. Для совместимости с несколькими браузерами используйте небольшой размер шрифта, как указано выше.

Ответ 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/

Ответ 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; 
    }
}

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

Ответ 4

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

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

span {
    font-size: 0;
}

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

Ответ 5

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

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

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

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