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

(about 21 hours ago)
RT @SavingDylan_com: Dylan enjoying the weather on a after his surgery in June. Dylan will have a VIP visitor next week from the USA please…


(6 days ago)
CSS Radio Button Styles From CodePen https://t.co/FNBvXAblo6


(21 days ago)
Github Stars !== Usage: React is still blowing Vue and Angular Away https://t.co/KybO16U0Vs


(about 1 month ago)
Speak out against the cruel Yulin dog meat festival via @HSIGlobal. https://t.co/j6NEh9oJWl


Top of page