A CSS Pseudo-element is basically a selector for specific parts of an element such as first-letter, first-line, etc. :after and :before pseudo elements can be used to insert after and before an element respectively.
Syntax
Following is the syntax for using CSS Pseudo elements on an element −
Selector::pseudo-element { css-property: /*value*/; }
Example
Let’s see an example of CSS Pseudo Elements −
<!DOCTYPE html> <html> <head> <style> ol, ul { list-style: none; counter-reset: demo_var2; } ul { counter-reset: demo_var1; } ol > li::before { counter-increment: demo_var2; content: counter(demo_var2, lower-roman) ") "; } li::after { counter-increment: demo_var1; content: " " counter(demo_var1) ". "; } </style> </head> <body> <ul> <li>Demo Line</li> <ol> <li>demo line</li> <li>demo line</li> </ol> <li>Demo Line</li> <ol> <li>demo line</li> <li>demo line</li> </ol> <li>Demo Line</li> </ul> </body> </html>
Output
This will produce the following output −
Example
Let’s see another example of CSS Pseudo Elements −
<!DOCTYPE html> <html> <head> <style> ::-webkit-input-placeholder { /*Support for Edge */ color: blue; font-style: italic; } :-ms-input-placeholder { /*Support for Internet Explorer */ color: blue; font-style: italic; } ::placeholder { color: blue; font-style: italic; } </style> </head> <body> <h2> Sample Form </h2> <textarea id="desc" name="desc" rows="5" cols="33" placeholder="Type here"></textarea> <br /> <input type="text" name="author" placeholder="author name"> </body> </html>
Output
This will produce the following output −