Алексей Овсянников
Практика использования псевдоэлементов в 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 учитывайте то, как они влияют на читабельность и доступность вашего контента. Всегда тестируйте итоговый результат в разных браузерах и на разных устройствах.
Карта развития разработчика
Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile