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

Rezultat

Interpretacja selektora ::before

Last updated