Pseudo-Elemente

postat acum 2 ani de Stefanescu Mihai in categorie CSS

Pseudo-elementele sunt folosite pentru aedita stilul unei anumite parti a unui element.

De exmplu, putem folosi pseudo-elemente pentru:

  • A modifica stilul primei litere a unui text, primei linii, etc
  • A adauga continut inaintea sau la urma unui anumit element.

Sintaxa

Atentie! Aici se pune de doua ori caracterul :, spre deosebire de pseudo-clase unde puneam doar o data (ex:::first-line vs :first-line)

Pseudo-Elementul ::first-line

Acest pseudo-element este folosit pentru a adauga un stil mai special primei linii de text dintr-un anumit element HTML.

Acest alement poate fi aplicat doar elementelor de tip block.

Exemplu:Fomratam prima linie e fiecarui <div> din document:

div::first-line {
    color: rgb(255, 0, 0);
    font-family: Helvetica;
}

Pseudo-Elementul ::first-letter

Acest pseudo-element este folosit pentru a adauga un stil mai special primei litere dintr-un anumit element HTML.

p::first-letter {
    color: red;
    font-size: 4em;
}

Pseudo-Elemente si Clasele CSS

Pseudo-elementele pot fi combinate cu clase CSS.

Iata un exemplu simplu:

div.mainContent::first-letter {
    color: rgb(255, 0, 0);
    font-size: 2em;
}

Acest cod va afisa prima litera a div-ului cu clasa mainContent rosie si de cu o marime a fontului de 200%.

Bineteles ca putem folosi si mai multe pseudo-elemente, precum in exemplul de mai jos:

div::first-letter {
    color: rgb(255, 0, 0);
    font-size: 2em;
}

div::first-line {
    color: rgb(0, 255, 0);
    font-size: .7em;
}

Pseudo-Elementul ::before

Acest pseudo-element poate fi folosit pentru a adauga continut ineintea continutului elementului HTML. Urmatorul exemplu adauga o imagine inaintea fiecarui element <h1>:

h1::before {
    content: url('imagini/sageata.gif');
}

Pseudo-Elementul ::after

Acest pseudo-element poate fi folosit pentru a adauga continut dupa continutului elementului HTML. Urmatorul exemplu adauga o imagine dupa fiecare element <h1>:

h1::after {
    content: url('imagini/sfarsit_rand.gif');
}

Pseudo-Elementul ::selection

Acest pseudo-element ne permite sa editam stilul selectiei utilizatorului.

Cu acest element nu functioneaza decat urmatoarele proprietati: color, background, cursor si outline.

::selection {
    color: red;
    background: green;
}

 

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!