Pseudoelement ::before w CSS

Definicja i użycie

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

Użyj 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 zawartości: content: none;
• Licznik: content: counter(li);
• Cudzysłów: content: open-quote;
• Wartość atrybutu: content: " (" attr(href) ")";

Wskazówka:Uwaga: Wstawiona treść nadal znajduje się wewnątrz określonego elementu. Wstawiona treść zostanie dodana przed inną zawartością elementu.

Użyj ::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 wstawianego 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

Wsparcie przeglądarek

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

Strony związane

Tutorial:Pseudoelementy w CSS

Zarówno:Pseudoelement ::after w CSS