Today, we will learn how to change list style type symbols. so we will give you a simple example of CSS ul list styling using ASCII special characters.
If you just want to use the ‘+’ symbol or another ASCII special characters in list items. by default, symbols provide such as square, circle, and disc symbols can be boring at that time require custom ASCII special characters in list items.
So we help you with this tutorial. When creating a list of items in a well-structured format. There are two types of lists item unordered lists and ordered lists. the specifies the list-style-type of marker list item in below example.
- circle
- disc
- square
But what about if we want to use something else, for example a special character like right double angle quotes » to make our list look like this:
» list item 1
» list item 2
» list item 3
To do this we can use content property in conjunction with the : before pseudo-element.
Please note this property is NOT supported by IE6 and IE7.
The content property may contain: text strings, URI of external resources (an image for example), and ASCII code special characters. For high quality typesetting it is recommended using ISO 10646 characters and encoding them in their HEX representation.
In our case right double angle quote has HEX value of BB, to make it right we code 00BB
1 2 3 4 | ul li:before { content: "\00BB"; } |
we also need to add an extra space between text and special character, single space HEX is 20, so we add \0020
1 2 3 4 | ul li:before { content: "\00BB \0020"; } |
Lets see the full code for this example
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: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> |