The Pseudo Element
Last updated on
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.
See the Pen oXPgLM by Michael Gearon (@michaelgearon) on CodePen.
::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.
See the Pen eNLmgR by Michael Gearon (@michaelgearon) on CodePen.
::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
See the Pen Pseudo Element Placeholder by Michael Gearon (@michaelgearon) on CodePen.
The Final Result
See the Pen Pseudo Elements by Michael Gearon (@michaelgearon) on CodePen.
More guides
- ::selection – Change text selection color
- CSS System Fonts
- Scroll to text fragment: How to link & highlight any text on a web page
Written by
Michael Gearon is a Senior Interaction Designer at Companies House in Cardiff. Previously Mike was a product designer at the GoCo Group including GoCompare, MyVoucherCodes and WeFlip. As well working for brands in South Wales like BrandContent and HEOR.