Pseudo-Elemente

Stefanescu Mihai 2 years ago 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;
}

 

Programator de ~8 ani, am lucrat la proiecte din mai multe industrstrii, de la eCommerce la telecomunicatii la automatizari. In acest timp am folosi diferite tehnologii, de la PHP, MySQL, PostgreSql, RabbitMq, Redis, Memcached si altele.


Get in touch
Pentru nelamuriri, dubii, comentarii si chestii de pe suflet ne putem auzi pe Discord, Reddit sau poti deschide o discutie noua pe forum

Club-ul este dedicat membrilor si ofera access la mai multe zone ale website-ului.
Login Register

🔖 Bookmarks
âœĻ Pentru a sustine aceasta comunitate am sa te rog sa te autentifici sau sa te inregistrezi!

🌊ïļ Discord
Back to top
Folosim cookie-uri pentru a oferi functionalitatile critice ale aplicatiei Invata-Programare. Folosim cookie-uri si pentru a analiza traficul, pentru care e nevoie de consimtamantul dvs. explicit.