Данный псевдо-элемент используется для добавления специального стиля первой букве текста в селекторе :
div {font-size: 20pt}
div:first-letter {font-size: 150%; float: right}
<div>Первое слово имеет специальный стиль</div>
Примечания:
- Псевдо-элемент "first-letter" может использоваться только с элементами блочного уровня.
- Следующие параметры применимы в псевдо-элементе "first-letter":
- параметры шрифта
- параметры цвета
- параметры фона
- параметры отступов
- параметры полей
- параметры границ
- text-decoration
- vertical-align (только если 'float' определен как 'none')
- text-transform
- line-height
- float
- clear
Псевдо-элементы и классы CSS
Псевдо-элементы можно объединять с классами CSS:
div.first:first-letter {color: #800000 }
<div class="first">Параграф статьи</div>
В примере выше первая буква всех элементов div, где class="first", будет красной.
Несколько псевдо-элементов
Несколько псевдо-элементов можно объединять:
div {font-size: 20pt}
div:first-letter {color: #808000; font-size: 150%}
div:first-line {color: #808080 }
<div>Текст текст текст</div>
В примере выше первая буква параграфа будет оливковой с размером шрифта 20pt. Остальная часть первой строки будет серой, а остаток параграфа будет иметь цвет по умолчанию.
