CSS :before and :after Pseudo-element

This post was originally published on blog.mandarbadve.com

The before and after insert content before and after of the element .

Let’s see an example below.

Here is HTML:

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc adipiscing tristique dictum. Nunc odio sapien, sagittis a viverra non, consequat sed urna. Nunc blandit mi nisl, ut condimentum mi iaculis ut. Morbi eget ante luctus, venenatis augue sed, condimentum tortor. Aliquam pretium commodo enim, vel consequat lacus dignissim quis. Vivamus tristique luctus egestas. Mauris aliquam enim et velit rhoncus, a tempus neque faucibus. Pellentesque nec erat ut nunc ultrices suscipit eget ac metus. Suspendisse eget auctor eros, ut dignissim ante. Nunc non justo facilisis odio blandit euismod non nec metus. Quisque eu felis nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam tempus consectetur lorem vitae facilisis.
</p>

And here is CSS

p:before
{
    content:"'";
    font-weight:bold;
}
 p:after
{
    content:"'";
    font-weight:bold;
}

In the above css we have applied: before and :after on the p element. We have set content to single quote and weight of the font is set to bold.

Here how the p element will render to browser.

You will see the single quote appears before and after the content of the p element.

You can see live example here http://jsfiddle.net/mandarBadve/3ye7E/