[Resolved] Best approach to styling bullets in unordered lists

Home Forums Support [Resolved] Best approach to styling bullets in unordered lists

Home Forums Support Best approach to styling bullets in unordered lists

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1543665
    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.

    #1543960
    David
    Staff
    Customer Support

    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.

    #1544033
    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!

    #1544039
    David
    Staff
    Customer Support

    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.

    #1544055
    Colin

    Perfect, thank you!

    #1544062
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.