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 20 hours ago)
Sortable Drag and Drop https://t.co/c1xeFmUiSI


(5 days ago)
30 interesting commands for the Linux shell - https://t.co/OIrLihaloy


(8 days ago)
Testing Emails in Development with Mailcatcher https://t.co/z6VnflMapT


(10 days ago)
Recurring Events with FullCalendar https://t.co/vcRCTuMMIu via @driftingruby


Top of page