How to decorate list bullets in arrow using CSS ?
Given a list of items and the task is to customize the bullet style of the list and replace it with the arrow.
Method 1: By Unicode Character
- First, we will turn off the default bullet style of the list.
- Then We will insert Unicode of the arrow character in the content property in the “li::before” selector.
Example:
<!DOCTYPE html><html> <head> <title>Decorating Bullet Style</title> <!-- Internal css --> <style type="text/css"> <!-- Element selected by id --> #list{ color: green; background: white; font-size: 30px; } <!-- Removes default style of bullet point --> li{ list-style: none; } <!-- ::before creates a pseudo-element that is the first child of the selected element --> li::before{ <!-- Unicode for >> character --> content: "\00BB"; } </style></head> <body> <!-- list of elements --> <ul id="list"> <li> Geeks</li> <li> for</li> <li> Geeks</li> </ul></body> </html> |
Output:
Method 2:
- We will insert URL of the image that we want to insert in place of the default bullet styles in the “list-style-image” property.
Example:
<!DOCTYPE html><html> <head> <title>Decorating Bullet Style</title> <!-- Internal css --> <style type="text/css"> <!-- Element selected by id --> #list{ color: green; width: 300px; font-size: 45px; font-family: sans-serif; border:2px solid black; } ul{ margin: 100px 100px; } <!-- Adds desired image at the in place of default bullets --> li{ list-style-image:URL( list-style-position: inside; } </style></head> <body> <!-- list of elements --> <ul id="list"> <li> Geeks</li> <li> for</li> <li> Geeks</li> </ul></body> </html> |
Output:
References:
- https://developer.mozilla.org/en-US/docs/Web/CSS/::before
- https://unicode-table.com/en/sets/arrow-symbols/
Please Login to comment...