Autor publikacji: Virtual Patriot - Administrator

::before

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - the ::before pseudo-element (LV3)

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.

Informacje techniczne 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"