Скрыть весь текст, кроме первой буквы с CSS?

Ответ 1

Вы можете, но ваш CSS ошибочен. Следующая версия работает (по крайней мере, в Chrome). Это делает невидимым dt и определяет переназначение для первой буквы, чтобы сделать ее видимой снова.

Я тоже пробовал с display, но это не работает, как и ожидалось. visibility: hidden скрывает содержимое, но сохраняет элемент на месте, а display: none удаляет его из потока и делает невозможным повторение видимости подэлементов (первая буква в этом случае).

Я добавил также зависание, чтобы вы могли навести письмо, чтобы увидеть остальную часть dt.

dt {
  visibility: hidden;
}
dt::first-letter {
  visibility: visible;
}

/* Hover the first letter to see the rest */
dt:hover {
  visibility: visible;
}

Hover to see the rest:
<dt>Lorum ipsum is a weird text</dt>
<dt>Foo bar</dt>

Ответ 2

Я думаю, вы можете попробовать следующее:

.twitter{
      display: block;
      color: transparent;
    }

    .twitter:first-letter{
      color: #000;
    }

 <div id="socialMedia">
    <a class="twitter">Twitter</a>
</div>
<div id="socialMedia">
    <a class="twitter">Google</a>
</div>

Ответ 3

Вы не можете использовать :not с селектором псевдоэлементов (см. this).

Что вы можете сделать, так это думать по-другому: прозрачно-обойти все, а затем цвет с ::first-letter. Поскольку последний имеет более высокую специфичность, он переопределит прозрачную настройку, таким образом, достигнет желаемого результата.

Ответ 4

Альтернатива, основанная на ответе Waruna, использует color вместо атрибутов на основе макета. Главное преимущество заключается в том, что он работает на каждом проверенном мной браузере (Firefox, Chrome и M $Edge, но, вероятно, должен работать на всех браузерах), и он не вызывает каких-либо визуальных сбоев (например, "базовый прыжок пикселя" из второго решения принятого ответа), так как он использует полностью визуальный атрибут.

Проблема с вашим исходным CSS заключается в том, что вы не можете использовать псевдоэлементы (::blah) внутри :not. Вы должны расширить его в обратную логику, чтобы вам не понадобилось :not

dt {
  color: transparent;
}
dt::first-letter {
  color: black;
}

/* For testing */
dt:hover {
  color: black;
}

<dt>Hello World!</dt>

Ответ 5

Попробуйте это....

.newline1::first-letter {
    font-size: 200%;
    color: #8A2BE2;
}
.newline2::first-letter {
  /*color: transparent;*/
font-size: 0px;
}

<div class="newline1">
Test Stackoverflow.com
</div>
<div class="newline2">
Test Stackoverflow.com
</div>