Pseudoelementy — CSS

::before i ::after tworzą dekoracyjną treść przed lub po zawartości elementu.

Cel lekcji

Poznać zagadnienie „Pseudoelementy”, zrozumieć przykład i umieć zastosować podobny zapis we własnym programie.

Wyjaśnienie krok po kroku

Nie zastępują właściwego tekstu w HTML, zwłaszcza informacji istotnych dla dostępności.

Najpierw przeanalizuj kod bez uruchamiania. Zwróć uwagę, jakie dane wykorzystuje program, co z nimi robi i skąd bierze się wynik pokazany pod przykładem.

Praktyczny przykład

Gdzie zobaczysz efekt: Wygląd strony w przeglądarce

.badge::before {
  content: "★ ";
  color: orange;
}

Przeczytaj kod linijka po linijce

.badge::before {Wybieramy elementy, które mają otrzymać podane style.
content: "★ ";Przypisujemy wartość wybranej właściwości CSS.
color: orange;Nadajemy kolor lub wygląd tła.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Przed tekstem elementu .badge pojawia się gwiazdka.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Jak utrwalić tę umiejętność?

Przepisz kod samodzielnie. Następnie zmień jedną wartość lub jedną instrukcję i spróbuj przewidzieć efekt. Dopiero potem uruchom zmienioną wersję. Jeśli wynik jest inny niż oczekiwany, porównaj kolejne linie.

Spróbuj samodzielnie

Dodaj ozdobny znak po nagłówku.