9.1 Pseudo-elementy ::before i ::after
Pseudo-elementy ::before i ::after to potężne narzędzia w CSS, które pozwalają dodawać dekoracyjne elementy przed lub po zawartości elementów bez zmiany HTML. Są szeroko stosowane do tworzenia efektów wizualnych, ulepszania interfejsu użytkownika i dodawania stylów do elementów.
Opis:
::before: pseudo-element dodawany przed zawartością elementu::after: pseudo-element dodawany po zawartości elementu
Składnia:
element::before {
/* style dla pseudo-elementu before */
}
element::after {
/* style dla pseudo-elementu after */
}Podstawowe właściwości
Pseudo-elementy ::before i ::after mogą zawierać praktycznie wszystkie właściwości CSS, w tym kolor, rozmiar, pozycjonowanie, tło, cienie itp. Jednak aby pseudo-element był widoczny, należy mu nadać zawartość i rozmiar.
content: określa zawartość pseudo-elementu. Może to być tekst lub obraz, a także pusty ciągdisplay: ustawia typ wyświetlania pseudo-elementu. Zwykle używa sięblocklubinline-blockposition: zarządza pozycjonowaniem pseudo-elementu (na przykładabsolutelubrelative)widthiheight: ustalają rozmiary pseudo-elementu
9.2 Dodawanie tekstu
Za pomocą właściwości content można łatwo dodać tekst na początku lub na końcu dowolnego elementu.
.example::before {
content: "Początek: ";
color: blue;
}
.example::after {
content: " :Koniec";
color: red;
}<body>
<p class="example">To jest przykład tekstu</p>
</body>Wyjaśnienie kodu:
.example::before: dodaje tekst "Początek: " przed zawartością elementu i koloruje go na niebiesko.example::after: dodaje tekst " :Koniec" po zawartości elementu i koloruje go na czerwono
9.3 Dekoracyjne linie
Również można dodać dekoracyjne linie, obramowujące zawartość:
.decorative-line::before,
.decorative-line::after {
content: "";
display: block;
height: 2px;
background: black;
margin: 10px 0;
}<body>
<div class="decorative-line">Tekst z dekoracyjnymi liniami</div>
</body>Wyjaśnienie kodu:
.decorative-line::before: tworzy dekoracyjną linię przed zawartością elementu.decorative-line::after: tworzy dekoracyjną linię po zawartości elementu
9.4 Wstawianie ikon
Za mało tekstu? To łatwo można wstawić kilka ikon:
.icon::before {
content: url('https://via.placeholder.com/20');
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}<body>
<p class="icon">Tekst z ikoną</p>
</body>Wyjaśnienie kodu:
.icon::before: dodaje ikonę przed tekstem, używając URL obrazu
9.5 Złożone elementy dekoracyjne
Dodajmy jeszcze coś bardziej skomplikowanego:
.complex-decor::before {
content: "";
display: block;
width: 50px;
height: 50px;
background: linear-gradient(45deg, #f06, transparent);
position: absolute;
top: -10px;
left: -10px;
}
.complex-decor {
position: relative;
padding: 20px;
background: #eee;
margin: 20px;
}<body>
<div class="complex-decor">Element z dekoracyjnym rogiem</div>
</body>Wyjaśnienie kodu:
.complex-decor::before: tworzy dekoracyjny element przed główną zawartością, używając gradientu i absolutnego pozycjonowania.complex-decor: ustawia relatywne pozycjonowanie dla elementu rodzicielskiego, aby pseudo-element mógł być pozycjonowany względem niego
9.6 Użycie animacji
Można nawet dodać animację:
.animated::before {
content: "";
display: block;
width: 100px;
height: 100px;
background: red;
animation: rotate 5s infinite;
margin: 20px auto;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}<body>
<div class="animated"></div>
</body>Wyjaśnienie kodu:
.animated::before: tworzy kwadratowy pseudo-element i animuje jego obrót za pomocą kluczowych klatek