8.1 Rodzaje pseudoszczegółów
Pseudoszczegóły w CSS pozwalają na stylizację określonych części elementów, takich jak pierwsza litera, pierwsza linia lub dodawanie zawartości przed lub po elemencie. Dają dodatkowe możliwości stylizacji, które nie wymagają zmiany struktury HTML. Pseudoszczegóły są oznaczane podwójnymi dwukropkami (::).
Podstawowe pseudoszczegóły:
::before::after::first-letter::first-line
8.2 Pseudoszczegół ::before
Pseudoszczegół ::before dodaje zawartość przed zawartością elementu. Często używa się go do dodawania elementów dekoracyjnych, ikon lub dodatkowego tekstu.
Składnia:
selektor::before {
content: "" | "tekst" | url() | counter | attr();
właściwość: wartość;
}
W polu content podajesz kod HTML tego, co chcesz dodać.
/* Dodaje strzałkę przed każdym elementem listy */
li::before {
content: "→ ";
color: red;
}
<ul>
<li>Pierwszy element listy</li>
<li>Drugi element listy</li>
<li>Trzeci element listy</li>
</ul>
8.3 Pseudoszczegół ::after
Pseudoszczegół ::after dodaje zawartość po zawartości elementu. Często używa się go do dodawania elementów dekoracyjnych, ikon lub dodatkowego tekstu.
Składnia:
selektor::after {
content: "" | "tekst" | url() | counter | attr();
właściwość: wartość;
}
W polu content podajesz kod HTML tego, co chcesz dodać.
/* Dodaje kropkę po każdym elemencie listy */
li::after {
content: " •";
color: blue;
}
<ul>
<li>Pierwszy element listy</li>
<li>Drugi element listy</li>
<li>Trzeci element listy</li>
</ul>
8.4 Pseudoszczegół ::first-letter
Pseudoszczegół ::first-letter stosuje się do pierwszej litery elementu. Często używa się go do tworzenia dekoracyjnych początkowych liter w akapitach.
Składnia:
selektor::first-letter {
content: "" | "tekst" | url() | counter | attr();
właściwość: wartość;
}
Przykład:
/* Zwiększa i zmienia kolor pierwszej litery każdego akapitu */
p::first-letter {
font-size: 2em;
color: green;
}
<p>To przykład tekstu w akapicie.</p>
<p>Jeszcze jeden przykład tekstu w akapicie.</p>
8.5 Pseudoszczegół ::first-line
Pseudoszczegół ::first-line stosuje się do pierwszej linii elementu. Często używa się go do stylizacji pierwszej linii akapitu.
Składnia:
selektor::first-line {
content: "" | "tekst" | url() | counter | attr();
właściwość: wartość;
}
Przykład:
/* Zmienia kolor i robi pogrubioną pierwszą linię każdego akapitu */
p::first-line {
color: navy;
font-weight: bold;
}
<p>
To przykład tekstu w akapicie, który zawiera wystarczającą ilość tekstu, aby rozbić się na kilka linii, demonstrując, jak działa pseudoszczegół ::first-line. Pierwsza linia każdego akapitu będzie wyróżniona pogrubioną czcionką i kolorem navy, aby przyciągnąć uwagę czytelnika. Ten efekt osiąga się za pomocą zasady CSS, którą określiliśmy powyżej.
</p>
<p>
Zwróć uwagę, że stylizacja jest stosowana tylko do pierwszej linii, niezależnie od jej długości. Reszta tekstu w akapicie zachowuje swój pierwotny styl. Może to być przydatne do wyróżniania kluczowych punktów lub tworzenia wizualnego rytmu w tekście.
</p>
GO TO FULL VERSION