CSS Pseudo Elements

❮ Prev Next ❯

Pseudo-elements are used to style a specific part of an element.

They start with a double colon ::.

What are Pseudo-elements?

Pseudo-elements are CSS selectors that target specific parts of an element's content, such as the first letter or first line of text.

They are denoted by double colons (::) and allow you to apply styles to virtual elements that are not present in the HTML markup.

::before and ::afterare probably the most used pseudo-elements. They are used to add content before or after an element, like icons for example.

Here's the list of the pseudo-elements:

Pseudo element Targets
::before creates a pseudo-element after the element
::after creates a pseudo-element before the element
::first-letter can be used to style the first letter of a block of text
::first-line can be used to style the first line of a block of text
::selection targets the text selected by the user

Let's do an example. Say you want to make the first line of a paragraph slightly bigger in font size, a common thing in typography:

Example: 


p::first-line {
  font-size:2rem;
}

Or maybe you want the first letter to be bolder: 


p::first-letter {
  font-weight:bolder;
}

::afterand ::before are a bit less intuitive. I remember using them when I had to add icons using CSS.

You specify the contentproperty to insert any kind of content after or before an element:

::before Pseudo-element

The ::beforepseudo-element inserts content before the content of the selected element. It is often used to add decorative elements, such as icons or quotation marks, before the actual content.

Example: 


.quote::before {
  content :"\201C";
}

::after Pseudo-element

The ::afterpseudo-element inserts content after the content of the selected element. Like ::before, it is commonly used for adding decorative elements or additional content to elements.

Example: 


.button::after {
  content :"▶";
}

Styling Pseudo-elements

Pseudo-elements can be styled using CSS properties like content, display, position, color, font-size and more. They allow for precise control over the appearance and positioning of virtual elements.

Example: 


.button::after {
  content :"✔"; /* Insert checkmark icon before button text */
  margin-right :5px; /* Add spacing between icon and text */
  color :green; /* Set color of the icon */
}

Use Cases for Pseudo-elements

Pseudo-elements are commonly used for:

  • Adding decorative elements, such as icons, borders, or background shapes, to elements.
  • Creating custom list styles, such as custom bullets or numbering styles.
  • Styling the first letter or first line of text in a paragraph for decorative effects or emphasis.

Compatibility and Browser Support

Pseudo-elements have excellent browser support and are widely used in modern web development.

However, it's essential to test your styles across different browsers to ensure consistent rendering.

Example 

<!DOCTYPE HTML>
<html>
    <head>
      <style>
      button::after {
        content :"▶";
      } 
      
      li::after {
        content :"✔";
        margin-right :5px;
        color :green;
      } 
      
      p::first-letter {
        font-weight:bolder;
      } 

      </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
      <title>Title of the Document</title>
    </head>
    <body>
      <div class="container">
        <h3>welcome to Coding Koleji </h3>
        <p>A Website for given free learning material online</p>
        <button>Next</button>
      </div>
      <div class=".container">
        <ul>
          <li>Mango</li>
          <li>Banana</li>
          <li>Orange</li>
        </ul>
      </div>
    </body>
  </html>

The CSS pseudo-elements are powerful tools for adding decorative elements and styling specific parts of an element's content.

By mastering the various pseudo-elements available in CSS, you can enhance the visual appeal and design of your web projects without cluttering the HTML markup.

Experiment with different pseudo-elements and styling techniques to achieve the desired effects and improve your CSS proficiency.

❮ Prev Next ❯