Introducere în Web Development

Pe lângă elementele pe care le definim noi în HTML, folosind taguri, browserele mai pun pe pagină și alte elemente, pe care le putem stiliza din CSS.

Aceste pseudo-elemente trebuie atașate elementului real care le conține. Adică trebuie să facem p::pseudo-element.

::before și ::after

Există două pseudo-elemente inline ascunse în fiecare element pe care îl definim în HTML. Pentru a le activa, trebuie să setăm proprietatea CSS content.

În proprietatea content, putem să punem string-uri (ceva între "ghilimele") sau imagini (aceleași valori pe care le-ar permite background-image), sau alte chestii interesante.

Dacă nu ne interesează să avem ceva conținut, putem să setăm un string gol "", și să ne jucăm cu pseudo-elementul.

                    .target::before {
  content: '';
  display: inline-block;
  border-radius: 50%;
  width: 1em;
  height: 1em;
  background: red;
  margin-inline: 0.25em;
}
                

Artă în CSS

Folosind doar proprietăți CSS, uneori cu ajutorul ::before și ::after, se pot crea niște forme incredibile.

De la simplul cerc obținut cu width și height egale și broder-radius: 50%, la monstrulețul din Space Invaders.

::first-letter și ::first-line

La fel ca în cărțile vechi, putem stiliza prima literă a unui bloc de text folosind ::first-letter. Dacă avem nevoie, ne putem lega și de prima linie prin ::first-line.

                    #example::first-letter {
  background-color: #ED1D90;
}

#example::first-line {
  color: #0FB7FF;
}