Псевдоэлементы обладают рядом дополнительных возможностей по выбору элементов веб-страницы и похожи на псевдокдассы. Список доступных псевдоэлементов:
-
::first-letter: позволяет выбрать первую букву из текста
-
::first-line: стилизует первую строку текста
-
::before: добавляет сообщение до определенного элемента
-
::after: добавляет сообщение после определенного элемента
-
::selection: выбирает выбранные пользователем элементы
В CSS2 перед псевдоэлементами, как и перед псевдоклассами, ставилось одно двоеточие. В CSS3 для отличия их от псевдоклассов псевдоэлементы стали предваряться двумя двоеточиями. Однако для совместимости с более старыми браузерами, которые не поддерживают CSS3, допустимо использование одного двоеточия ::before.
Стилизуем текст, используя псевдоэлементы first-letter и first-line:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Псевдоклассы в CSS3</title>
<style>
::first-letter { color:red; font-size: 25px; }
::first-line { font-size: 20px; }
</style>
</head>
<body>
<p>Но он ничего не видал. Над ним не было ничего уже, кроме неба, — высокого неба, не ясного, но все-таки неизмеримо высокого, с тихо ползущими по нем серыми облаками.</p>
</body>
</html>
Читать далее
Вступите в группу, и вы сможете просматривать изображения в полном размере
Это интересно
+1
|
|||
Последние откомментированные темы:
-
Лучший чат-бот с искусственным интеллектом - какой из них вам подходит?
(1)
boris 1
,
13.01.2022
-
Новогоднее украшение рабочего стола ПК
(1)
Елена2022
,
21.12.2021
-
Как JPG преобразовать в Word с распознаванием текста
(1)
Olejaweb
,
13.11.2021
-
Как вернуть классическое ленточное меню в проводник Windows 11
(1)
Сергей Михайлов сын
,
26.10.2021
20250326154912