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

(11 days ago)
RT @Netlify: ⚡️Announcing that we have raised an additional $30m led by @kpcb’s Mamoon Hamid, with @a16z and the founders of @SlackHQ @Yelp…


(20 days ago)
CSS Filter Playground https://t.co/ZOl7SOGI5S


(20 days ago)
“5 steps to speed up your image heavy website” by @BrandonMorelli https://t.co/UE1G7EQjlQ


(25 days ago)
“How browser rendering works — behind the scenes” by @OhansEmmanuel https://t.co/NJY1YzEgU4


Top of page