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.
<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.
<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:
