Mi az a pszeudo-elem?

A CSS-ben a pszeudo-elem egy kulcsszó, amelyet egy szelektorhoz adunk, és lehetővé teszi egy adott elem részének stílusozását anélkül, hogy kifejezetten további DOM-elemeket hoznánk létre.

A leggyakrabban használt pszeudo-elemek a következők:

• ::before: generált tartalmat helyez el a kiválasztott elem tartalma előtt.
• ::after: generált tartalmat helyez el a kiválasztott elem tartalma után.
• ::first-line: stílusokat alkalmaz az első sorra egy blokk elemben.
• ::first-letter: stílusokat alkalmaz az első betűre egy blokk elemben.
• ::selection: stílusokat alkalmaz az elem azon részére, amelyet a felhasználó kijelölt (pl. szöveg kijelölése egérrel).
• ::placeholder: stílusokat alkalmaz a <input> vagy <textarea> mezők helykitöltő szövegére.

Példa a ::before és ::after használatára:

div::before {
  content: "Előtag: "; // Kötelező content tulajdonság
  color: blue;
}

div::after {
  content: " Utótag"; // Kötelező content tulajdonság
  color: red;
}

Példa a ::first-line és ::first-letter használatára:

p::first-line {
  font-weight: bold;
}

p::first-letter {
  font-size: 2em;
  float: left;
  margin-right: 0.1em;
}

A pszeudo-elemek hasznosak dekoratív elemek hozzáadására, tartalom generálására, szövegrészek stílusozására és más feladatokra, egyszerűsítve a HTML-struktúrát. Történetileg egyetlen kettősponttal (:) kezdődtek, de a CSS3 specifikáció két kettőspontot (::) vezetett be a pszeudo-klassok (:hover, :focus) és a pszeudo-elemek megkülönböztetésére, bár egyetlen kettőspont (:) még mindig támogatott a legtöbb böngészőben régi pszeudo-elem esetén. Ajánlott a :: használata.