Create custom bullet marker for UL list in HTML and CSS

Description

The following code shows how to create custom bullet marker for UL list.

Example


<html>
<head>
<style type="text/css" media="Screen">
ul {<!--from   www. j ava  2 s . c  om-->
    margin-left: 0;
    padding-left: 0;
}
ul li {
    margin-left: 60px;
}
* .none {
    list-style-type: none;
}
* .marker {
    float: left;
    margin-left: -60px;
    width: 60px;
    text-align: center;
}

</style>
</head>
<body>
    <ul>
        <li class="none"><span class="marker">&ndash;</span>A</li>
        <li class="none"><span class="marker">&ndash;</span>B</li>
        <li class="none"><span class="marker">&ndash;</span>C</li>
        <li class="none"><span class="marker">&ndash;</span>D</li>
        <li class="none"><span class="marker">&ndash;</span>E</li>
        <li class="none"><span class="marker">&ndash;</span>F</li>
        
    </ul>
</body>
</html>

</body>
</html>

Click to view the demo

Home »
HTML CSS »
CSS »

CSS Introduction

CSS Background

Create custom bullet marker for UL list in HTML and CSS

Description

Example

CSS Introduction

CSS Background

CSS Border

CSS Box Layout

CSS Text

CSS Font

CSS Form

CSS List

CSS Selectors

CSS Others

CSS Table