[Resolved] Best approach to styling bullets in unordered lists

[Colin]

Hi, I have searched the support forum regarding styling bullets in unordered lists. I see a lot of different possible answers (hooks?, plugins, SVG icons, etc) and I’m confused.

I’d like to create something like this:
https://www.skillpacks.com/wp-content/uploads/2020/11/Bullet-list-formatting.jpg

I’m happy for every UL on the site to have this appearance, and getting the color right is important to me. However, it doesn’t have to be exactly this style, just something that has more visual appeal than the standard bullet.

Could you please advise the best approach for me to take, thanks. And if code is involved a code snippet would be wonderful! Thank you.

[David]

Hi there,

try adding this CSS:

.entry-content ul {
    list-style: none;
}

.entry-content ul li {
    position: relative;
}

.entry-content ul li:before {
    content: '\003E';
    position: absolute;
    left: -1.5em;
    top: 0.25em;
    border-radius: 1em;
    height: 1em;
    width: 1em;
    font-size: 1em;
    line-height: 0.9;
    text-align: center;
    background-color: #00f;
    color: #fff;
}

You can change the background-color and color properties for circle and caret respectively.

[Colin]

This is brilliant, thank you. Can you also give me a list of the options for content – the ‘\003E’ – I’d like to be able to explore the options. Thank you!

[David]

Those are HTML Symbols, so they are browser native ( so no font request). Quite limited in comparison to a Font icon. You can find more here:

https://www.toptal.com/designers/htmlarrows/math/greater-than-sign/

If you’re using a font library then they generally have CSS unicodes.

[Colin]

Perfect, thank you!

[David]

You’re welcome

[Author]

Posts