The Pseudo Element

Michael Gearon

Last updated on July 7, 2021

Not to be mistaken with pseudo-classes, pseudo elements allow you to style certain parts of a document. We can style after or before an element, the first letter or first line, the selection and the backdrop. Originally in CSS1 and CSS2 the pseudo -elements started with a colon (:) which was the same as pseudo-classes. To separate the two in CSS3 pseudo elements now start with a double colon (::) this is not supported in all versions of Internet Explorer, and you can still use one colon.

Why is it called a Pseudo Element?

The word pseudo is a Greek word that stands for “lying, false” and an element in HTML could be a paragraph or a header. Put the two together and we create an alternative description of a false paragraph or a false header and this is what the pseudo-element is, a fake element which alters your HTML after load.

::first-line

The first line pseudo-element targets the first formatted line of an element, by targeting the first line you can style this differently to the rest of the paragraph for example make it larger, different colour or italicised. I personally don’t see a lot of useful implementations of this element, unless you are trying to achieve a magazine/newspaper layout then this would a great option.
[codepen_embed height=”300″ default_tab=”html,result” slug_hash=”oXPgLM” user=”michaelgearon”]See the Pen
by Michael Gearon (@michaelgearon)
on CodePen.[/codepen_embed]

::first-letter

The ‘::first-letter’ is really useful to achieve results similar to those you see in newspapers and magazines. You can create “drop caps” and “initial caps” using the first letter pseudo element.

[codepen_embed height=”300″ default_tab=”html,result” slug_hash=”eNLmgR” user=”michaelgearon”]See the Pen
Pseudo – First Letter by Michael Gearon (@michaelgearon)
on CodePen.[/codepen_embed]

::before and ::after

Self explanatory the before and after pseudo elements matches a virtual last child of the selected element. In this example we add a pound sign before the list item and ‘g’ for grams at the end and add a colour. It is interesting to note if you add content in using CSS that you can’t highlight it, so take this into consideration when placing in content using CSS.

::placeholder

The placeholder text in an input field styling can be altered by using the ::placeholder pseudo-element. This could be useful to match the website styling to the inputs on a form

[codepen_embed height=”300″ default_tab=”html,result” slug_hash=”WvYwmE” user=”michaelgearon”]See the Pen
Pseudo Element Placeholder by Michael Gearon (@michaelgearon)
on CodePen.[/codepen_embed]

The Final Result

[codepen_embed height=”300″ default_tab=”html,result” slug_hash=”pJLLYd” user=”michaelgearon”]See the Pen
Pseudo Elements by Michael Gearon (@michaelgearon)
on CodePen.[/codepen_embed]

More guides

Written by