css before and after pseudo elements example
Today, We will let you know how to add icon before or after text CSS example In this article. you can use the CSS pseudo-elements for add icon before or after the text. we are using the CSS pseudo-elements for this example.
You can learn faster by following our steps.
CSS pseudo-element before the content
In this example, You will place the icon before the select element.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <style type="text/css"> ul{ list-style: none; } ul li:before { content: "\00BB \0020"; } </style> </head> <body> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> </ul> </body> </html> |
» list item 1
» list item 2
» list item 3
CSS pseudo-element after content
In this example, You will place the icon after the select element.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSS list styling using ASCII special characters</title> <style type="text/css"> ul{ list-style: none; } ul li:after { content: "\00BB \0020"; } </style> </head> <body> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> </ul> </body> </html> |
list item 1 »
list item 2 »
list item 3 »
Read Also
How To Change Style Of Placeholder In Textbox
How To Make Dialog Box/Popup Using Bootstrap
CSS Ul List Styling Using ASCII Special Characters
Please follow and like us:
