CSS Pseudo-Elements :before and :after Example

Updated on August 13, 2015     Kisan Patel

A CSS Pseudo-Elements :before and :after creates a phoney element and inserts it before or after the content of the element that you have targeted.

Here is the example of its usage:

<!-- HTML -->
<h1 class="text">This is the first item</h1>

<!-- CSS -->
<style type="text/css">
.text:before {
    content:"1. "; /* what to display before text element */
}

.text:after {
    content: "!"; /* what to display after text element */
}
</style>

In above code snippet, The content property would give the number 1. before the text and ! after the text like this:

See the Pen mJgmyM by Kisan (@pka246) on CodePen.