CSS pseudo-element: before and after

::before and ::after pseudo-elements are used to create elements positioned exactly before and after the content of the targeted elements, the term of pseudo means that this element doesn’t really exists in HTML structure, but will be generated by the browser (DOM) and will visible to user, so when we look at its source (right click » view source), we couldn’t find it, but when using inspect element (in Chrome — right click » inspect element), we’ll find it.

Syntax:

<p class="box">Notification box2 </p>

CSS:

p.box { width:260px; margin-left:30px; border:1px solid #666; padding:12px 25px; } p.box::before { content: ''; border-left: 5px solid #f7941e; position: relative; left:-25px; bottom:-15px; padding-top:29px ; }

HTML:

Use cases:

• Icons: Appending icons like font-awesome before or after an element.
• Breadcrumbs: Adding a slash or some icon between breadcrumbs.
• Clear floats: One of the best use of before or after is to clear the floats.
• Quotes: Adding quotes to para tag.
• Arrows: Adding preceding or trailing arrows to div or elements.

Example:

Please follow the code-pen link to see some examples.

Originally published at blog.upendramanve.com on August 10, 2018.