DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Mandar Badve
Mandar Badve

Posted on • Originally published at blog.mandarbadve.com on

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>
Enter fullscreen mode Exit fullscreen mode

And here is CSS

p:before
{
    content:"'";
    font-weight:bold;
}
Γ‚ p:after
{
    content:"'";
    font-weight:bold;
}
Enter fullscreen mode Exit fullscreen mode

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.

beforeandafter

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/

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Good news! You can update to dark mode in your DEV settings.