This content originally appeared on DEV Community and was authored by RahulReddy
Hello, People
Today we are going to learn about pseudo-elements, one of the most useful CSS properties.
Pseudo-elements in CSS allow us to add content to a page without adding additional HTML elements.
Seems confusing? Okay, in simple terms.
Pseudo-elements are like a shadow, which can be seen but not able to touch.
I can assure you that if you master these topics, you will use them all over your project. Without wasting time let us dive in.
::Before
Before selector is used to position content before the content of the selected element.
Syntax
We need to add the item with the keyword ::before with the required content property. The content can be any string or even blank.
element::before{
content: "";
}
Note: before and after pseudo-elements will not work without content property.
Example
https://codepen.io/Archisol/pen/poeLzLR
::After
The after pseudo-element can be used to position content after the content of the selected element.
Syntax
We need to add the item with the keyword ::after with the required content property.
element::after{
content: "";
}
Example
https://codepen.io/Archisol/pen/JjWLPMZ
Note: These elements are inline by default
I Hope, the blog was useful. If there are any queries feel free to ping me on Twitter. Now as a task you can create the below image using before and after pseudo-elements.
The solution can be found here Codepen
For more about Pseudo Elements, refer below websites:
This content originally appeared on DEV Community and was authored by RahulReddy
RahulReddy | Sciencx (2021-06-05T03:50:14+00:00) ::Before and ::After in CSS made easy. Retrieved from https://www.scien.cx/2021/06/05/before-and-after-in-css-made-easy/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.