# Pseudo elements ::short explanation ### What is a pseudo-element ? > A pseudo-element is keyword that we add to the selector which helps tp style the element(s). For example : - If you want to change the first letter or first line - use `::first-letter` or `::first-line` - If you want to add some content before or after the element - use `::before` or `::after` ### Syntax : ```css selector::pseudo-element { /* Write your styles here */ } ``` - selector == any HTML element `

`, ``, `

` etc. - pseudo-element == `::first-letter`, `::first-line`, `::before`, `::after` etc. ### Example 1 : CSS snippet : ```css /* The first line of every

element. */ p::first-line { color: blue; text-transform: uppercase; } ``` In the above example, it will style the first line of the `

` element. ### Example 2 : CSS snippet : ```css .imp-label::before { content: ""; display: block; width: 20px; height: 20px; border-radius: 10px; background-color: #5915d8; } ``` HTML snippet : ```html ... name ... ``` In the above example the CSS will be added before the `name` label. ### Example 3 : CSS snippet : ```css .imp-label::after { content: ""; display: block; width: 20px; height: 20px; border-radius: 10px; background-color: #e0f56a; } ``` HTML snippet : ```html ... name ... ``` In the above example the CSS will be added after the `name` label. ---------------------------------------------------------------------------------------------- That's it for this blog. I hope you have learnt something from it. Happy coding. Thank you !