Псевдоэлементы для текста
Части текста, например его первую строку или первую букву, можно стилизовать отдельно с помощью текстовых псевдоэлементов.
Псевдоэлемент CSS ::first-line
Чтобы придать первой строке текста особый стиль, используйте ::first-line.
Примечание: ::first-line принимают только блочные элементы.
Пример
Каждый элемент <p> здесь получает отформатированную первую строку текста.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The ::first-line Pseudo-element</title>
<style>
p::first-line {
color: red;
font-variant: small-caps;
font-size: 19px;
}
</style>
</head>
<body>
<h2>The ::first-line Pseudo-element</h2>
<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p>
</body>
</html>
Псевдоэлемент CSS ::first-letter
Чтобы придать первой букве текста особый стиль, используйте ::first-letter.
Примечание: ::first-letter принимают только блочные элементы.
Пример
Каждый элемент <p> здесь получает отформатированную первую букву.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The ::first-letter Pseudo-element</title>
<style>
p::first-letter {
color: red;
font-size: xx-large;
}
</style>
</head>
<body>
<h2>The ::first-letter Pseudo-element</h2>
<p>You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!</p>
</body>
</html>
Псевдоэлементы и классы HTML
Псевдоэлементы легко сочетаются с классами HTML: укажите класс в селекторе рядом с псевдоэлементом.
Пример
В элементах <p> с классом «intro» первая буква красная и увеличенного размера.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo-element with Class</title>
<style>
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
</style>
</head>
<body>
<h2>Pseudo-elements and HTML Classes</h2>
<p class="intro">This paragraph has the "intro" class. The first letter is red and larger.</p>
<p>This paragraph does not have the "intro" class. The first letter is not styled.</p>
</body>
</html>
Несколько псевдоэлементов
Один элемент также может получить сразу несколько псевдоэлементов.
Пример
Здесь каждая часть элемента <p> выглядит по-разному. Его первая буква красная и размера xx-large, остальная часть первой строки синяя и написана капителью (small-caps), а всё остальное сохраняет размер и цвет шрифта по умолчанию.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Pseudo-elements</title>
<style>
p::first-letter {
color: red;
font-size: xx-large;
}
p::first-line {
color: blue;
font-variant: small-caps;
}
</style>
</head>
<body>
<h2>Multiple Pseudo-elements</h2>
<p>The first letter of this paragraph is red and in an xx-large font size. The rest of the first line is blue and in small-caps. The rest of the paragraph will be in the default font size and color. Some more text to demonstrate multiple lines being used in the paragraph so you can see the difference.</p>
</body>
</html>