CSS ::first-letter — стиль першої літери

Селектор ::first-letter задає стиль першої літери визначеного елемента. Селектор ::first-letter може бути використаний тільки для блокових елементів. Наступні властивості можуть бути використані з ::first-letter:

• font
• color
• background
• margin
• padding
• border
• text-decoration
• vertical-align (тільки якщо float="none")
• text-transform
• line-height
• float
• clear

правити

Загальний опис

правити

+ додати пораду чи нотатку

Синтаксис

::first-letter {


    css declarations;


}

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	7	12	9

Підтримка: мобільні переглядачі

Переглядач
	37	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<p>Буквиця на початку абзацу виросла сама собою.</p>
<p>Кожен абзац дістає свою.</p>

p::first-letter {
    font-size: 200%;
    color: #8A2BE2;
}

<p class="drop">Перша літера цього абзацу оформлена псевдоелементом. У розмітці її ніяк не виділено — текст лишається цілим, його можна скопіювати й знайти пошуком.</p>

.drop {
    font: 16px/1.6 Georgia, serif;
    max-width: 32rem;
}

.drop::first-letter {
    float: left;
    margin-right: .5rem;
    font-size: 3.2rem;
    line-height: .8;
    font-weight: 700;
    color: #b45309;
}