-
Greetings.
Please review the page.
The 2nd and 3rd level bullet points all show circles. Is there a way to have custom/different bullet point icons to clearly differentiate between the levels?
Please guide.
Thank you.
-
Hi there,
Try this css to target the 3rd level of lists, feel free to change the list-style:
li>ol>li>ol, li>ul>li>ul { list-style: lower-latin; }For more info: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style
-
Many thanks. And what would be the CSS to customize first level of bullet points to show an arrow pointing right?
-
Hi there,
you can do something like this – which will target the top UL inside the OL:
ol>li>ul>li { list-style-type: '\27A4'; }And it uses a HTML Symbol:
https://www.toptal.com/designers/htmlarrows/arrows/If you want more control then use this method:
ol>li>ul>li { list-style: none; position: relative; } ol>li>ul>li:before { content: '\27A4'; position: absolute; left: -1.1em; } -
Many thanks, but I could have been more clear.
By first level, I mean where it says EB-1, EB-2 etc. Please suggest the CSS to target that level.
-
Use this selector:
.entry-content >ol >li, .entry-content >ul>li { list-style-type: '\27A4'; }
- You must be logged in to reply to this topic.