Understanding CSS Pseudo-element Selectors

In our previous post, we went over CSS pseudo class selectors which includes various type of pseudo classes. In this post we are going to discuss pseudo element selectors in CSS.

This is the fifth and last part of a five parts article. You can find first four parts from the following links:

Part -1 Simple Selectors
Part -2 CSS Combinators
Part -3 CSS Attribute Selectors
Part -4 CSS Pseudo class Selectors

It is our last post in this series, hope you will get enough information on pseudo element selectors. Then, let’s get started!

What are pseudo elements?

Pseudo elements allow you to access elements that don’t actually exist in the HTML, like the first line of a text block or its first letter.

A CSS pseudo element is used to style specified parts of an element.

Pseudo elements really helpful in the situations when you just want to style the first letter of a paragraph to create the drop cap effect or you want to insert some content before or after an element, etc. only through stylesheet.

Syntax

selector :: pseudo-element { property : value; }

For an example:

<p>Hello Sunil</p>

p::before{
  content: "_";
}

In this example, we are appending an underscore symbol in front of every <p> element.

Pseudo elements allow you to do lots little design tricks without cluttering the markup. At first it might be easy to confuse the pseudo classes we discussed in our previous article and pseudo elements.

Kindly note that all the selectors started with a single colon (:), belongs to pseudo class. Pseudo elements on the other hand always use a double colon (::).

The following section describes the most commonly used pseudo elements with descriptive example of each of them.

Textual pseudo elements

The first pseudo elements ever released were the ::first-letter and ::first-line textual pseudo elements.

::first-line and ::first-letter pseudo element, is commonly used to add typographical details to text elements, like drop caps or initials.

::first-line

The ::first-line pseudo element selector targets the first line of a block level element.

The effect may be dynamic as the length of the first line depends on many factors such as the width of the element, the width of the page, and the font size in use.

  <body>
    <div>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque fugiat
        dolorum ratione beatae, corporis iusto pariatur repellendus distinctio
        autem. Sed eum illum neque ut sit voluptatem tenetur, officiis nisi
        amet. In accusantium, consequatur, soluta earum amet aliquam atque porro
        ipsa reiciendis dolorum velit vero eum illo? Optio quae quam est libero
        ea cupiditate et, quibusdam necessitatibus, debitis beatae quod
        blanditiis.
      </p>
    </div>
  </body>

p::first-line {
  background-color: yellowgreen;
}

CSS Pseudo-element Selectors - first-line - img - 1

::first-letter

The ::first-letter pseudo element is used to add a special style to the first letter of a text.

The following example formats the first letter of the text in all <p> elements:

 <body>
    <p>
      You can use the ::first-letter pseudo-element to add a special effect to
      the first character of a text!
    </p>
  </body>

p::first-letter {
  color: #e63c49;
  font-size: xx-large;
}

CSS Pseudo-element Selectors - first-letter - img - 2

Generated content pseudo elements

The ::before and ::after generated content pseudo elements create new inline level pseudo elements just inside the selected element.

Most commonly these pseudo elements are used in conjunction with the content property to add insignificant information to a page, however that is not always the case.

Additional uses of these pseudo elements may be to add user interface components to the page without having to clutter the document with unsemantic elements.

::before

::before creates content right before the selected element. ::before is often used to add simple cosmetic content to an element using the content property.

  <body>
    <div>
      <p>This is a message you don't want to miss.</p>
    </div>
  </body>

p::before {
  content: 'Check this out: ';
  color: #e63c49;
}

CSS Pseudo-element Selectors - before - img - 3

❗ Important

The content property is used with the ::before and ::after pseudo elements, to insert generated content.

::after

The ::after pseudo element works just like ::before except content is added after the targeted element.

 <body>
    <div>
      <p>This is a message you don't want to miss.</p>
    </div>
 </body>

p::after {
  content: '  Thanks for reading!';
  color: #e63c49;
}

CSS Pseudo-element Selectors - after - img - 4

Fragment pseudo elements (::selection)

The ::selection fragment pseudo element applies styles to the part of a document that has been highlighted by the user.

The default text selection background color is blue, and this property is used to change the default color.

Only a few CSS properties can be used to style the ::selection pseudo element and they are:

color
background-color
text-shadow
cursor
caret-color
outline
text-decoration
text-emphasis-color

Lets see an example:

See the Pen ::selection tests by Chris Coyier (@chriscoyier) on CodePen.

If you try to style ::selection with a property that’s not on the list, then that property will be ignored. It may be tricky seeing background in that list because the property will only render a color when used on ::selection and it won’t render a background image or gradient.

❗ Caution

::selection pseudo element was introduced in the CSS Selectors Level 3 but was removed and, currently, it is in pseudo elements Level 4.

Miscellaneous pseudo elements

::marker

The ::marker pseudo element is for styling the stylistic marker of a list element. For example, the bullet point of a default <ul> (e.g. •) or the numeral of a default <ol> (e.g. 1.).

This makes it extremely easy to do simple things like colorize them.

See the Pen Basic usage of ::marker by Chris Coyier (@chriscoyier) on CodePen.

You can combine ::marker with the content property to change what the marker is. For example, replacing list bullets with emoji.

See the Pen Basic usage of ::marker by Chris Coyier (@chriscoyier) on CodePen.

::placeholder

The ::placeholder pseudo element allows you to style the placeholder text of a form element ( <input> or <textarea>).

The default color of the placeholder text is light grey in most browsers. So lets change it to red.

  <body>
    <input type="text" name="fname" placeholder="First name">
  </body>

::placeholder {
  color: #e63c49;;
}

CSS Pseudo-element Selectors - placeholder - img - 5

Conclusion

We hope you found this piece of article useful, especially for future reference. Before ending of this post we want to highlight the difference between Pseudo Elements vs Pseudo Class.

Pseudo Elements	Pseudo Class
Denoted by `::`	Denoted by `:`
Selects some actual content	Selects elements in certain conditions
Specificity – `0 0 0 1`	Specificity – `0 0 1 0`