6.1 Właściwość content
Pseudoelementy ::before i ::after umożliwiają dodawanie treści przed i po zawartości elementu, bez zmieniania HTMLa.
Są szeroko stosowane do celów dekoracyjnych, ulepszania interfejsu użytkownika i tworzenia bardziej interaktywnych stron internetowych.
Co to są pseudoelementy ::before i ::after?
Pseudoelementy ::before i ::after tworzą wirtualne elementy, które są wstawiane odpowiednio przed i po
zawartości wybranego elementu. Te pseudoelementy często są używane do dodawania ikon, elementów dekoracyjnych
lub innych efektów wizualnych.
Składnia before:
selektor::before {
content: "tekst lub inne wartości";
/* style */
}
Składnia after:
selektor::after {
content: "tekst lub inne wartości";
/* style */
}
Właściwość content
Kluczową właściwością dla pseudoelementów ::before i ::after jest content. Ta właściwość określa zawartość
pseudoelementu. Może to być ciąg tekstu, obraz, a nawet pusta wartość, jeśli potrzebny jest tylko efekt wizualny.
Możliwe wartości właściwości content:
- Tekst:
"tekst" - Obraz:
url("path/to/image.png") - Pusta wartość:
"" - Atrybuty:
attr(attributeName) - Licznik:
counter(name)
6.2 Przykłady użycia ::before i ::after
Dodawanie elementów dekoracyjnych
Przykład 1: Dodawanie ikony przed tekstem
W tym przykładzie pseudoelement ::before używany jest do dodawania ikony przed tekstem linku.
margin-right dodaje przestrzeń między ikoną a tekstem:
/* Dodawanie ikony przed tekstem linku */
a::before {
content: "🔗";
margin-right: 5px;
}
Przykład 2: Dodawanie elementu dekoracyjnego po akapicie
W tym przykładzie pseudoelement ::after dodaje element dekoracyjny po akapicie. display: block i
text-align: right są używane do wyrównania elementu do prawej strony:
/* Dodawanie elementu dekoracyjnego po akapicie */
p::after {
content: "❦";
display: block;
text-align: right;
color: red;
}
Tworzenie dekoracyjnych ramek i tła
Przykład 3: Dekoracyjna ramka wokół elementu
W tym przykładzie pseudoelement ::before używany jest do tworzenia dekoracyjnego paska nad elementem
div. position: absolute i top: -10px umożliwiają pozycjonowanie paska powyżej elementu:
/* Dekoracyjna ramka wokół elementu */
div::before {
content: "";
display: block;
width: 100%;
height: 10px;
background-color: #3498db;
position: absolute;
top: -10px;
left: 0;
}
Przykład 4: Automatyczne dodawanie cudzysłowów
W tym przykładzie pseudoelementy ::before i ::after używane są do dodawania cudzysłowów wokół bloku cytatu:
/* Automatyczne dodawanie cudzysłowów wokół cytatu */
blockquote::before {
content: "“";
font-size: 2em;
color: #ccc;
}
blockquote::after {
content: "”";
font-size: 2em;
color: #ccc;
}
Przykład 5: Numerowanie nagłówków
W tym przykładzie pseudoelement ::before używany jest do dodawania numeru przed nagłówkiem h2.
counter-increment zwiększa wartość licznika, a content: counter(section) wstawia aktualną wartość licznika:
/* Numerowanie nagłówków */
h2::before {
counter-increment: section;
content: counter(section) ". ";
font-weight: bold;
}
6.3 Zastosowanie i stylizacja pseudoelementów
Stylizacja pseudoelementów
Pseudoelementy można stylizować tak jak każde inne elementy. Obsługują większość właściwości CSS, w tym kolory, tła, obramowania, rozmiary i pozycjonowanie.
Użycie pseudoelementów do tworzenia złożonych układów
Pseudoelementy często są stosowane do tworzenia elementów dekoracyjnych w schematach, takich jak ramki, cienie i inne efekty wizualne, bez konieczności dodawania dodatkowych elementów HTML.
Przykład: każdy element listy będzie miał niebieski marker przed tekstem:
ul li::before {
content: "•";
color: blue;
margin-right: 5px;
}
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
6.4 Przykład pełnej implementacji
/* Dodawanie ikony przed tekstem linku */
a::before {
content: "🔗";
margin-right: 5px;
}
/* Dodawanie elementu dekoracyjnego po akapicie */
p::after {
content: "❦";
display: block;
text-align: right;
color: red;
}
/* Dekoracyjna ramka wokół elementu */
.decorative-box {
position: relative;
}
.decorative-box::before {
content: "";
display: block;
width: 100%;
height: 10px;
background-color: #3498db;
position: absolute;
top: -10px;
left: 0;
}
/* Automatyczne dodawanie cudzysłowów wokół cytatu */
blockquote::before {
content: "“";
font-size: 2em;
color: #ccc;
}
blockquote::after {
content: "”";
font-size: 2em;
color: #ccc;
}
/* Numerowanie nagłówków */
h2::before {
counter-increment: section;
content: counter(section) ". ";
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład pseudoelementów ::before i ::after</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a href="#">Link z ikoną</a>
<p>Akapit z elementem dekoracyjnym po tekście</p>
<div class="decorative-box">Element z dekoracyjną ramką</div>
<blockquote>Cytat z automatycznymi cudzysłowami</blockquote>
<h2>Nagłówek z numeracją</h2>
<h2>Kolejny nagłówek</h2>
</body>
</html>
GO TO FULL VERSION