Updated on 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.