::before and ::after explain and use cases.

October 27, 2020 by No Comments

Introduction

Let’s unravel the beauty of ::before and ::after explain. If you’re a CSS lover like me, then you must have heard of Pseudo-element. Pseudo-element gives you the power to manipuate the behaviour of your elements, an example is :hover. with Pseudo-elements you can program your elements to behave in a certain way. In todays article we are going to explore the ::before and ::after Pseudo-elements.

Simply put, the ::before and ::after is a way to generate and insert elements to the page. Note that the content created does not indicate in the DOM. Use before to add to the begining or after to add to the end of the page or targeted element.

div::before {
    content: 'Johndoe';
}
div::after {
    content: 'Johndoe';
}
<div>
    <!-- When before is used div::before -->
    Johndoe

    sleettech

    <!-- when after is used div::after  -->
    Johndoe
</div>

See Also:

Solution – The guest machine entered an invalid state

Best Computer Schools in Cross River State.

You Need Permission to Perform This Action – Take control of your PC.

Common Use Case – Add a close button to a div

<div>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
     do eiusmodtempor incididunt ut labore et dolore magna aliqua. 
     Ut enim ad minim veniam,
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex 
     ea commodo
     consequat. Duis aute irure dolor in reprehenderit in 
     voluptate velit esse
     cillum dolore eu fugiat nulla pariatur. Excepteur sint 
     occaecat cupidatat non
     proident, sunt in culpa qui officia deserunt mollit anim id 
     est laborum.
</div>
<style>
	div {
		width: 300px;
		background: blue;
		margin: auto;
		color: white;
		padding: 1em;
		position: relative;
	}
	div::after {
		content: 'X';
	    position: absolute;
	    right: 1px;
	    top: 1px;
	    font-size: 1.33em;
	    font-weight: bolder;
	    color: red;
	    background: white;
	    padding: .1em;
	}
</style>

What you can generate with ::before and ::after Pseudo-elements

Text or A string: content: "a string"; – You can type any text here as seen in the above use case, note special characters must be in Unicode format.

An image: content: url(/path/to/image.jpg);

Leaving Blank: content: “”; – Useful for clearfix and inserting images as background-images

Also checkout on:

Leave a Reply