Практика использования псевдоэлементов в CSS

Псевдоэлементы ::before и ::after

Псевдоэлементы ::before и ::after используют для создания вокруг элемента декоративных форм, значков или даже пользовательского текста.

Добавление декоративных элементов

Допустим, у нас есть базовый элемент кнопки:

<button class="button">Отправить</button>

Мы можем добавить декоративный элемент к этой кнопке с помощью псевдоэлемента ::before. Для этого добавим следующий код:

.button::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: red;
    margin-right: 5px;
}

В примере мы добавляем маленькую красную точку слева от текста кнопки с помощью псевдоэлемента ::before.

Примичание: Обратите внимание на тот факт, что по умолчанию, ::before и ::after строчные элементы. Это значит, что параметры высоты и ширины не будут применяться к ним пока вы не выставити им display: block / inline-block. А без высоты и ширины, браузер не станет их отрисосывать.

Добавление декоративных текста

Псевдоэлементы ::before и ::after также можно использовать для добавления пользовательского текста к элементу. Допустим, на странице есть заголовок:

<h1 class="heading">I learned new syntax!</h1>

Мы можем добавить текст к этому заголовку с помощью псевдоэлемента ::after. В нашем CSS мы можем добавить следующий код:

.heading::after {
    content: " - And I'll fix the syntax with a little pet project";
}

В этом примере мы добавили текст после текста заголовка с помощью псевдоэлемента ::after.

Псевдоэлементы ::first-letter и ::first-line

Позволяют выбирать и стилизовать определенные элементы в зависимости от их состояния или положения в документе. Два полезных псевдокласса, которые необходимо знать, это :first-letter и :first-line.

Стилизация первой буквы абзаца

Мы можем использовать псевдокласс :first-letter для стилизации первой буквы абзаца. Например, у нас есть такой абзац:

<p class="intro">Per aspera ad astra</p>

Применим к первой букве абзаца больший размер шрифта и другой цвет с помощью псевдокласса :first-letter:

.intro:first-letter {
    font-size: 2em;
    color: purple;
}

Таким образом мы увеличили размер шрифта первой буквы абзаца до 2em и изменили его цвет на фиолетовый.

Стилизация первой строки абзаца

Мы также можем использовать псевдокласс :first-line для стилизации первой строки абзаца. Например, у нас есть такой абзац:

<p class="quote">"Кто же его посадит, он же памятник!" - Джентельмены удачи</p>

Мы можем применить другой стиль шрифта и цвет к первой строке абзаца с помощью псевдокласса :first-line в нашем CSS:

.quote:first-line {
    font-style: italic;
    color: hsla(100, 90%, 23.5%);
}

Здесь мы применили курсивный стиль шрифта и изменили цвет первой строки абзаца на зеленый.

Примичание: Используя :first-letter и :first-line учитывайте то, как они влияют на читабельность и доступность вашего контента. Всегда тестируйте итоговый результат в разных браузерах и на разных устройствах.