Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Customising bullets in UL/LI list

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 8
    • 0
    • 204
    Comment on it

    Hi Readers!

    List items are very commonly used in webpages. Lists can be ordered or unordered. The ordering of the items is very simple, by default. This can be customised with standard CSS. Let us first talk about the ordering of the list items in both ordered and unordered list.

    The unordered list bullets can be of 3 kinds :

    1. Circle
    2. Square
    3. Disc

    The ordered list can be ordered in various ways. 

    1. Numbers
    2. Uppercase letters
    3. Lowercase letters
    4. Uppercase roman numbers
    5. Lowercase roman numbers

     

    This was about the ordering of the list items.

    But what if we want to change the color of the bullets in unordered list. If you try the color: value; , it changes the color of the text and not the bullets. So, how do you do it? That too, without using a span or a background-image.

    The only way to achieve this is by using pseudo classes. They obviously have their own drawbacks. But that's the only way we can do this at present.

    Let us see the sample code for this.

     

    HTML :

    <ul>
        <li>Mansi</li>
        <li>Manish</li>
        <li>Sudhanshu</li>
    </ul>

     

    CSS :

    ul li{
        list-style-type: none;
    }
    
    li:before {
        content: '';
        background-color: #898989;
        display: inline-block;
        position: relative;
        height: 15px;
        width: 15px;
        border-radius: 50%;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        margin-right: 4px;
        top: 2px;
    }

     

    OUTPUT :

     

    Happy Coding :)

    Customising bullets in UL/LI list

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: