Pseudoelemente

Pseudoelementele oferă o serie de capacități suplimentare pentru selectarea elementelor pe o pagină web și sunt similare cu pseudoclasele. Lista de pseudoelemente disponibile include:

::first-letter: selectează prima literă din text
::first-line: stilizează prima linie a textului
::before: adaugă conținut înainte de un anumit element
::after: adaugă conținut după un anumit element
::selection: selectează textul selectat de utilizator

În CSS2, înaintea pseudoelementelor, ca și în cazul pseudoclaselor, se punea un singur două puncte. În CSS3, pentru a le diferenția de pseudoclase, pseudoelementele sunt precedate de două două puncte. Cu toate acestea, pentru compatibilitate cu browserele mai vechi care nu suportă CSS3, este permisă utilizarea unui singur două puncte pentru :before.

Stilizăm textul folosind pseudoelementele first-letter și first-line:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Pseudoelemente în CSS3</title>
       <style>
           ::first-letter { color:red; font-size: 25px; }
           ::first-line { font-size: 20px; }
       </style>
   </head>
   <body>
       <p>Nu a văzut nimic. Deasupra lui nu era nimic altceva decât cerul -- înalt, nu neapărat limpede, dar totuși incomensurabil de înalt, cu nori gri trecând liniștit pe acolo.</p>
   </body>
</html>

Folosim pseudoelementele before și after:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Pseudoelemente before și after în CSS3</title>
       <style>
           .warning::before{ content: "Important! "; font-weight: bold; }
           .warning::after { content: " Fiți precaut!"; font-weight: bold;}
       </style>
   </head>
   <body>
       <p><span class="warning">Nu încercați să introduceți limba în priza electrică.</span></p>
   </body>
</html>

Aici, pseudoelementele sunt aplicate elementului cu clasa warning. Ambele pseudoelemente folosesc proprietatea content, care stochează textul ce trebuie inserat. De asemenea, pentru a atrage atenția, pseudoelementele utilizează evidențierea textului cu bold prin proprietatea font-weight: bold.

Utilizăm pseudoelementul selection pentru stilizarea elementelor selectate:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Pseudoelementul selection în CSS3</title>
       <style>
           ::selection {
               color: white;
               background-color: black;
           }
       </style>
   </head>
   <body>
       <p>Pseudoelementele în CSS3 permit formatarea textului.</p>
   </body>
</html>