Ostatnio edytowany:

::before

Autor: Virtual Patriot

Przeznaczenie selektora ::before

      ::before { ... }
    

Za pomocą selektora ::before oraz właściwości content możemy sprawić, że do początkowej zawartości interesującego nas elementu HTML zostanie dodana dodatkowa treść umieszczona w dodatkowym pseudoelemencie.

Dodatkowe techniczne informacje o selektorze ::before

ograniczenie - elementy HTML

Tylko element HTML (z wyłączeniem elementu input), który w danym momencie może reprezentować zawartość tekstową.

ograniczenie - właściwości CSS

brak

Przykładowa reguła CSS, selektor ::before

p::before {
  content:"KURS CSS";
  color:red;
}

Wyjaśnienie przykładowej reguły CSS

      p::before { content:"KURS CSS"; color:red; }
    
p::before

do początkowej zawartości każdego elementu p dodaj dodatkowy pseudoelement

content

wraz z dodatkową treścią

"KURS CSS"

w postaci ciągu znaków KURS CSS

color

koloru

red

czerwonego

Kod źródłowy przykładowego dokumentu HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      p::before {
        content:"KURS CSS";
        color:red;
      }
    </style>
  </head>

  <body>

    <div>
      do początkowej zawartości tego elementu "div" nie został dodany żaden dodatkowy pseudoelement, ponieważ ten element HTML nie jest elementem "p"
    </div>

    <p>
      do początkowej zawartości tego elementu "p" został dodany dodatkowy pseudoelement wraz z dodatkową treścią w postaci ciągu znaków "KURS CSS" o kolorze czerwonym, ponieważ ten element HTML jest elementem "p"
    </p>

    <div>
      do początkowej zawartości tego elementu "div" nie został dodany żaden dodatkowy pseudoelement, ponieważ ten element HTML nie jest elementem "p"
    </div>

  </body>
</html>

Rezultat

do początkowej zawartości tego elementu "div" nie został dodany żaden dodatkowy pseudoelement, ponieważ ten element HTML nie jest elementem "p"

do początkowej zawartości tego elementu "p" został dodany dodatkowy pseudoelement wraz z dodatkową treścią w postaci ciągu znaków "KURS CSS" o kolorze czerwonym, ponieważ ten element HTML jest elementem "p"

do początkowej zawartości tego elementu "div" nie został dodany żaden dodatkowy pseudoelement, ponieważ ten element HTML nie jest elementem "p"

Interpretacja selektora ::before

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 8

"Internet Explorer" w wersji wcześniejszej niż wersja "9" interpretuje zapis tylko z jednym znakiem dwukropek, czyli zapis ":before".

Edge

tak

Zobacz więcej informacji o interpretacji selektora .