CSS Pseudo-elements for :before and :after

The ":before" pseudo-element can be used to insert some content before the content of an element.
The ":after" pseudo-element can be used to insert some content after the content of an element.

:before and :after

CSS:
.main:before {
    color:#ff0000;
    font-size:24px;
    content:"before"
}
.main:after {
    color:#ff0000;
    font-size:24px;
    content:"after"
}

HTML:
<div class="main">
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
</div>

OUTPUT:
 before Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text. after