5 CSS pseudo-elements you never knew existed

In this post, I will draw your attention to some pseudo-elements you probably don’t know about or have not used before. The main goal is to help you avoid writing unnecessary lines of JavaScript code for something you could easily achieve with CSS.

What are pseudo-elements?

According to MDN, A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to apply styles to the first line of a paragraph.

Here is the general syntax for pseudo-elements:

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

With the above explanation, we can now go back to our topic. I will be listing and drawing your attention to some pseudo-elements you never knew existed.

1. The ::first-letter pseudo-element

The ::first-letter pseudo-element is used to add a special style to the first letter of a text if it is not preceded by any other content (such as images or inline tables) on its line. This is a very common styling used by blog authors. It can only be applied to block-level elements.

For example, suppose you want to style the first letter of an article so it has a different color and size from other letters. This would be easier done with the ::first-letter pseudo-element, rather than making use of JavaScript to get the first letter of a particular element.

p:first-letter{
       font-size: 300%;
       color: red;
       float: left;
     }

The next question that might pop up on your mind is, what properties can I style with the ::first-letter pseudo-element?

The following properties apply to the ::first-letter pseudo-element:

• font properties
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (only if float is none)
• text-transform
• line-height
• color
• float
• etc.

See the Pen
First-letter Pseudo-element by Olawanle Joel (@olawanlejoel)
on CodePen.

2. The ::first-line pseudo-element

The ::first-line pseudo-element is used to add a special style to the first line of a text or block-level element. The length of the first line can be determined by so many factors, such as the width of the element, the width of the document, the font size of the text, and lots more.

For example, if I want to style the first line of a news blog article, this would be easier done with the ::first-line pseudo-element, instead of making use of JavaScript to get the first line.

p::first-line { 
     background-color: #fff;
     color: #000; 
     word-spacing: 10px;
    }

The following properties apply to the ::first-line pseudo-element:

• font properties
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• color
• text-shadow
• etc.

See the Pen
First-line Pseudo-element by Olawanle Joel (@olawanlejoel)
on CodePen.

3. The ::selection pseudo-element

The ::selection pseudo-element is a highlighted part of the document or an element by a user. It is used to apply styles to the part of a document that has been highlighted by the user (i.e. when a user clicks and drags his/her mouse across text).

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

Syntax:

::selection { 
        css declarations; 
    }

For example:

Suppose I want to change the background color from the default color (blue) to green. This can easily be achieved using the ::selection pseudo-element.

::selection {  
    color:  red;  
    background:  yellow;  
    }

The above styling will apply generally to that page, but you can also decide to target individual elements or CSS selectors:

p::selection {  
 color:  red;  
 background:  yellow;  
 }

There are only three properties that ::selection will work with:

• color
• background properties (background-color, background-image, etc.)
• text-shadow

4. The ::backdrop pseudo-element

The ::backdrop CSS pseudo-element is a box size of the viewport, which is rendered immediately beneath any element being presented in full-screen mode. This is part of the Fullscreen API and will earn you some swag points if you want to be artistic or creative.

The ::backdrop pseudo-element makes it possible to obscure, style, or completely hide everything located below the element when it’s the topmost one in the top layer.

Whenever you enter the fullscreen mode in your browser, most browsers tend to show a black backdrop (background). With the ::backdrop pseudo-element, you can change that black backdrop to whatever color you like!

Syntax:

::backdrop{ 
   css declarations; 
  }

For example, if I want to change the style used when a video is shifted to full-screen mode to a grey-blue color (rather than the black it defaults to in most browsers), I’d do this:

video::backdrop {
  background-color: #448;
}

Read more about the backdrop pseudo-element on MDN. You can also check this link for an example.

5. The ::placeholder pseudo-element

The ::placeholder pseudo-element selects form elements with placeholder text and lets you style the placeholder text.

Note: The default color of the placeholder text is light grey in most browsers.

For example, suppose my website makes use of just two colors: pink and white. If I want the placeholder text to be pink, this can easily be achieved using the ::placeholder pseudo-element.

<!-- HTML -->
< input  type="text"  placeholder="Enter your full name">

/* CSS */
::placeholder {  
color:  pink;  
}

The above code will change the color of all placeholder texts connected to this styling pink. But what if we just want it to apply to a particular field or selected fields? In that case, we would have to add selectors.

<!-- HTML -->
< input  type="text" class="name"  placeholder="Enter your name">

/* CSS */
.name::placeholder {  
color:  pink;  
}

Since we are actually styling text, the major CSS properties you will be using are those that pertain to text styling like color, font-size, font-weight, etc.

See the Pen
Placeholder Pseudo-element by Olawanle Joel (@olawanlejoel)
on CodePen.

Conclusion

These are five pseudo-elements many developers forget to use, or are maybe not even aware of. I hope this post was able to explain them properly with clear examples.

Thanks for reading!

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.

LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web and mobile apps — start monitoring for free.