03. ::before - CSS3

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>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

Interpretacja selektora `::before`

Previous02. ::first-letter - CSS3 NextPage 4

Last updated 1 month ago

hashtagPrzeznaczenie selektora ::before

hashtagInformacje techniczne o selektorze ::before

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

hashtagWyjaśnienie przykładowej reguły CSS

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

hashtagRezultat

hashtagInterpretacja selektora ::before