Everything about css list styling

How to style a list using css?

To style list we have four property
list-style-image: value image url;
This property is used to set image to the list.
list-style-position: 1.inside 2.outside(default);
This property is used to set position of the list.
list-style-type:type names,string,symbol;
For unordered list
we have value: none, square, circle, disc(default), string(write in double or single quotation "" or ''), html symbol.
For order list we have value:upper-alpha, lower-alpha, upper-roman,lower-alpha, decimal(default), none.

Copy the given link:
https://www.toptal.com/designers/htmlarrows/symbols/

You will see various symbols there. Go and just copy any symbol and paste it in the position of list-style-type value. But use a quotation and then inside the quotation paste the symbol.

Example:list-style-type:"ℎ";
list-style: list-style-type list-style-position list-style-image;
This is a short of techniques for all list property.

<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
    #ul_list{
        list-style-image:url(arrow.jpg);
        list-style-position:inside;
        list-style-type:"☞";
    }
    #ol_lsit{
        list-style: upper-roman outside url(arrow.jpg);
    }
</style>
</head>
<body>

<ul id="ul_list">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>
<ol id="ol_lsit">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ol>

</body>
</html>

CodersAim is created for learning and training a self learner to become a professional from beginner. While using CodersAim, you agree to have read and accepted our terms of use, privacy policy, Contact Us