Скройте элемент, но покажите 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, но- это осуждено поисковыми системами и
- это, кажется, не работает на элементы промежутка (?)
Какие-либо другие идеи относительно того, как я мог бы сделать это?
2 ответа
Построение на превосходном взломе @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;
}
}
, Если Ваше содержание промежутка является абзацем и не только словом, Вам, возможно, также понадобится отрицательный межсимвольный интервал.
Я проявил аналогичный подход, как предложено здесь с visibility, но это все еще имеет поле содержания.
Мое решение состоит в том, чтобы просто использовать font-size для сокрытия целевого текста.
span {
font-size: 0;
}
span:before {
font-size: 16px;
}