CSS Pseudo-elements

Posted: 21 May 2014, Category: Coding

CSS pseudo elements

If you write HTML and CSS code or are interested in the latest web technologies you have probably heard of CSS pseudo-elements.

I find CSS pseudo elements as a great help for simplifying and speeding up work when building websites.

CSS pseudo-elements are added to HTML selectors and allow you to style certain parts of a document or as you might say CSS pseudo-elements are used to add special effects to some selectors.

List of CSS pseudo-elements

As you inspect source code of various websites, you might see double colons (::) instead of just one (:). Both values are supported in most browsers however I use double colons (::) here since it’s the future!

::before pseudo-element

Code:

    
p::before {
  content: "-- ";
}
   
<p>The ::before CSS pseudo-element will place content declared before this paragraph.</p>
    

Result:

The ::before CSS pseudo-element will place content declared before this paragraph.

::after pseudo-element

Code:

    
p::after {
  content: " --";
}
   
<p>The ::after CSS pseudo-element will place content declared after this paragraph.</p>
    

Result:

The ::after CSS pseudo-element will place content declared after this paragraph.

::first-letter pseudo-element

Code:

    
p::first-letter {
  color:red;
  font-weight:bold;
}
   
<p>This is simple ::first-letter CSS pseudo-element example. Only first letter of this sentence should be affected by CSS style applied.</p>
    

Result:

This is simple ::first-letter CSS pseudo-element example. Only first letter of this sentence should be affected by CSS style applied.

::first-line pseudo-element

Code:

    
p::first-line {
  color:red;
  font-weight:bold;
}
   
<p>This is simple ::first-line CSS pseudo-element example. If text in this paragraph is long enough and spans over two or more lines, ::first-line CSS pseudo-element will apply properties declared to first line only.</p>
    

Result:

This is simple ::first-line CSS pseudo-element example. If text in this paragraph is long enough and spans over two or more lines, ::first-line CSS pseudo-element will apply properties declared to first line only.

Resources

Conclusion

According to caniuse.com website the browser support for ::before and ::after CSS pseudo-elements is extremely good on all devices so you have a good reason to use it.

I hope this short CSS pseudo-elements article has given you a bit better understanding of how the CSS pseudo-element property works. Please feel free to contact me if you have any questions, comments or suggestions.

Back to Blog page

Blog categories

Twitter feed

(5 days ago)
Preparing for General Data Protection Regulation (GDPR) https://t.co/RS2J7YN7pJ via @driftingruby


(15 days ago)
ActiveRecord Tricks https://t.co/n5TfzS9s1Q via @driftingruby


(15 days ago)
Optimize your images and encode it in base64 https://t.co/e59VyAwp6B via @redpik


(20 days ago)
Great day at Classic Motorbikes show in Carlow. Well done to organizers for all effort #carlow https://t.co/cbZVUTRnBg


Top of page