Pseudo-elemente pentru text
Părți ale unui text, precum prima linie sau prima literă, pot fi stilizate separat cu pseudo-elemente pentru text.
Pseudo-elementul CSS ::first-line
Pentru a da primei linii a unui text un stil special, folosește ::first-line.
Notă: Doar elementele de tip bloc acceptă ::first-line.
Exemplu
Aici, fiecare element <p> primește o primă linie de text formatată.
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>
Pseudo-elementul CSS ::first-letter
Pentru a da primei litere a unui text un stil special, folosește ::first-letter.
Notă: Doar elementele de tip bloc acceptă ::first-letter.
Exemplu
Aici, fiecare element <p> primește o primă literă formatată.
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>
Pseudo-elemente și clase HTML
Pseudo-elementele se combină ușor cu clasele HTML: pune clasa în selector, alături de pseudo-element.
Exemplu
În elementele <p> cu clasa „intro”, prima literă este roșie și mai mare.
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>
Pseudo-elemente multiple
Un element poate primi și mai multe pseudo-elemente în același timp.
Exemplu
Aici, fiecare parte a unui element <p> arată diferit. Prima literă este roșie și xx-large, restul primei linii este albastru și scris cu small-caps, iar tot ce urmează păstrează dimensiunea și culoarea implicite ale fontului.
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>