Pseudoelement ::before CSS

Definicja i użycie

CSS ::before Pseudoelementy służą do wstawienia treści przed określonym elementem.

Użycie content Atrybut określa treść do wstawienia. Wartość content może być:

• Ciąg znaków: content: "Hello world!";
• Obraz: content: url(myimage.jpg);
• Brak treści: content: none;
• Licznik: content: counter(li);
• Cudzysłowy: content: open-quote;
• Wartość atrybutu: content: " (" attr(href) ")";

Wskazówka:Proszę zauważyć, że wstawiona treść nadal znajduje się wewnątrz określonego elementu. Wstawiona treść zostanie dodana przed inną zawartością wewnątrz elementu.

Użycie ::after Wstaw treść po zawartości określonego elementu.

Przykład

Przykład 1

Wstaw ciąg znaków przed zawartość każdego elementu <p>:

p::before {
  content: "Przeczytaj to: ";
}

Spróbuj sam

Przykład 2

Wstaw ciąg znaków przed zawartość każdego elementu <p> i ustaw styl wstawionego tekstu:

p::before {
  content: "Przeczytaj to -";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

Spróbuj sam

Gramatyka CSS

::before {
  deklaracje css;
}

Szczegółowe informacje techniczne

Obsługa przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje ten pseudoelement.

Strony związane

Tutorial:Pseudoelement CSS

Wskazówka:Pseudoelement ::after CSS