:: първа буква - CSS-трикове

::first-letterе псевдо елемент, който ви позволява да оформите първата буква в даден елемент, без да е необходимо да лепите таг около тази първа буква във вашия HTML. Въпреки че към DOM не се добавят етикети, все едно целевата първа буква е обхваната в таг. Можете да оформите първата буква, както бихте направили истински елемент с:

p::first-letter ( font-weight: bold; color: red; )


The first letter is bold and red

Резултатът е сякаш имате фалшив елемент около първата буква:


The first letter is bold and red.

Първата буква е получер и червен

Псевдоелементът работи само ако родителският елемент е блок с контейнери за блок (с други думи, той не работи за първата буква от display: inline;елементи.)
Ако имате ::first-letterи ::first-lineелемент, и елемент, първата буква ще наследи стиловете от първия ред, но стиловете в ::first-letterзаглавието ще презапишат, когато стиловете са в конфликт.
Ако генерирате съдържание с ::before, първата буква или пунктуационен знак, независимо дали е част от оригиналния текстов възел или е създаден с генерирано съдържание, ще бъде целта.

Повече информация

Когато използвате за капкови капачки, използвайте заедно с, p:first-of-typeтака че не всяка първа буква се оформя
Пример за писалка - с генерирано съдържание
W3C Wiki
Модул W3C CSS3 селектори

Поддръжка на браузър

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.