Introduction
Hey there, 👋
In a previous article, we discussed pseudo-classes, in this article we will discuss Pseudo-elements, which are also a type of pseudo-selectors. We will start by defining pseudo-elements, listing some examples, then move on to how you can use them on your website.
Note: code snippets used in this article will be showcased in an embedded codepen at the end of this article
Let's dive right in 🚀
Pseudo-elements ::
Pseudo-elements act like elements but they only represent a certain part of the element. I say they act like elements because the browser treats them like elements and allows you to style them independently.
Examples of pseudo-elements include:
- the first letter, or line, of an element
- the space before or after an element
Pseudo-elements cannot work independently, they have to be combined with other selectors using two colons (::
). Pseudo-elements select a part of an element, so when using pseudo-elements other selectors are used as well.
The syntax:
selector::pseudo-element{
property: value;
}
The double colon syntax ::
differs from the single colon :
in pseudo-classes, this difference is part of the changes made by W3C(World Wide Web Consortium) to distinguish between pseudo-classes and pseudo-elements.
Examples
There are only a few pseudo-elements but you do not need to memorize them as most IDEs provide auto-complete for pseudo-elements.
Below is a list of some common pseudo-elements.
-
The
::after
pseudo-elementThis pseudo-element selects the space after an element. You might have seen some web pages where there is an image after each heading, that image was added using this pseudo selector.
h1::after{ content: "(^-^)"; background-color: #128; color: white; padding: 5px; border-radius: 10px; }
The
content
property above specifies what should go into the pseudo-element. I used text here, but you could use icons or even images. I then added some styling to make the content more noticeable. -
The
::before
pseudo-elementThis pseudo-element selects the space before an element. Like the
::after
pseudo-element, it can also be used to insert content(like an image or icon) before elements.
p::before{ content: ":)"; background-color: #128; color: white; padding: 2px; margin: 2px; border-radius: 10px; }
-
The
::first-line
pseudo-elementThis pseudo-element selects the first line of an element. As the first line is usually what holds the main point of the paragraph, using this to change the text color or increase the font weight (boldness), will make the first line stand out.
p::first-line{ font-weight: bold; font-family: 'Lucida Sans'; font-size: large; color: blue; }
As in the previous cases, there is no need to add the
content
property, as the first line of the paragraph already contains content. -
The
::first-letter
pseudo-elementThis pseudo-element selects the first letter of the first word in an element. It is mostly used at the start of a paragraph to increase the font size of the first letter.
h2::first-letter{ color: red; font-size: xx-large; font-weight: bold; }
As this selects only the first letter, the styling that can be applied is limited to only letter-based styling.
-
The
::marker
pseudo-elementThis pseudo-element selects the markers of list items. A marker is that round item before
li
items that lets you know it is a list item. In ordered listsol
, the markers are usually numbers.
li::marker{ color: red; font-size: large; }
-
The
::placeholder
pseudo-elementThis selects the placeholders in form inputs. The placeholder is the grey piece of text that is inside input elements, it is mostly used to specify what is to go into that input element.
input::placeholder{ color: green; }
-
The
::selection
pseudo-elementThis is used to select the text that has been highlighted/selected by a user. You can select elements by right-clicking and dragging your mouse over the elements you want to select.
::selection{ background-color: black; color: white; }
The default in most browsers is a light-blue background, with white text. But with this pseudo-element, you can add your styling.
Visit w3schools for a complete list of pseudo-elements and examples.
Embedded Codepen:
PS: I only used simple styles like colors so you can see the direct effects of the styling.
Conclusion
Now you know what Pseudo-elements are, and how you can use them on your web pages. Pseudo-elements don't do much but if used in the right way, they can transform your website wholesomely.
If you use pseudo-elements without specifying the original elements they are to select, they will just apply to all the elements on your page. For instance, p::first-letter
will only apply to paragraphs, but ::first-letter
will apply to all elements.
Note: Pseudo-classes are not to be confused with pseudo-elements which only select certain portions of the element. I explained pseudo-classes in this article.
If you liked this article don't forget to leave a like and follow for more content.
Top comments (0)