Pseudo-elemente pentru conținut
Cu pseudo-elementele pentru conținut devine posibil să adaugi conținut înainte sau după un element, să stilizezi marcatorii de listă și multe altele.
Pseudo-elementul CSS ::before
Ca să adaugi ceva înaintea conținutului unui element, folosește ::before și precizează ce se adaugă în proprietatea content.
Exemplu
Fiecare element <h3> primește o imagine înaintea conținutului său.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The ::before Pseudo-element</title>
<style>
h3::before {
content: url(https://prompt-cookbook.com);
}
</style>
</head>
<body>
<h2>The ::before Pseudo-element</h2>
<h3>This is a heading</h3>
<p>The ::before pseudo-element inserts content before the content of each h3 element.</p>
<h3>This is another heading</h3>
<p>Each h3 heading gets a smiley image before it.</p>
</body>
</html>
Pseudo-elementul CSS ::after
Perechea lui, ::after, adaugă ceea ce numește proprietatea content la sfârșitul conținutului unui element.
Exemplu
Fiecare element <h3> primește o imagine după conținutul său.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The ::after Pseudo-element</title>
<style>
h3::after {
content: url(https://prompt-cookbook.com);
}
</style>
</head>
<body>
<h2>The ::after Pseudo-element</h2>
<h3>This is a heading</h3>
<p>The ::after pseudo-element inserts content after the content of each h3 element.</p>
<h3>This is another heading</h3>
<p>Each h3 heading gets a smiley image after it.</p>
</body>
</html>
Pseudo-elementul CSS ::marker
Marcatorii elementelor de listă (buline sau numere) pot fi stilizați cu ::marker.
Exemplu
Aici marcatorii elementelor de listă primesc propriul stil.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The ::marker Pseudo-element</title>
<style>
::marker {
color: red;
font-size: 23px;
}
</style>
</head>
<body>
<h2>The ::marker Pseudo-element</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</body>
</html>
Pseudo-elementul CSS ::selection
Orice parte a unui text pe care o selectează utilizatorul poate fi stilizată cu ::selection.
Exemplu
Textul selectat de utilizator devine roșu pe un fundal galben.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The ::selection Pseudo-element</title>
<style>
::selection {
color: red;
background: yellow;
}
</style>
</head>
<body>
<h2>The ::selection Pseudo-element</h2>
<p>Select some of this text to see the ::selection effect. The selected text will appear in red with a yellow background.</p>
</body>
</html>
Pseudo-elementul CSS ::backdrop
Zona din spatele unei casete de dialog sau a unui element popover poate fi stilizată cu ::backdrop.
Exemplu
Aici zona din spatele unei casete de dialog primește propriul stil.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The ::backdrop Pseudo-element</title>
<style>
dialog::backdrop {
background-color: lightgreen;
}
</style>
</head>
<body>
<h2>The ::backdrop Pseudo-element</h2>
<button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>
<dialog id="myDialog">
<h3>Dialog Box</h3>
<p>This dialog has a light green backdrop.</p>
<button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>
</body>
</html>