iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

CSS Lists

By · Reviewed & last updated · Part of CSS Tutorial

CSS gives lists three knobs: the marker shape, where the marker sits, and an optional image marker. There's also ::marker for fine control.

The list-style properties

PropertyPurposeCommon values
list-style-typeShape of the marker.disc, circle, square, decimal, lower-roman, none
list-style-positionInside or outside the content box.outside (default), inside
list-style-imageCustom marker image.url('arrow.svg')
list-styleShorthand for the three above.square inside url('a.svg')
::markerPseudo-element to colour/size the marker.li::marker { color: #04AA6D; }

Recipes

CSS
/* Reset the marker entirely (common for nav menus) */
ul.nav { list-style: none; padding: 0; margin: 0; }

/* Green square bullets */
ul.checklist { list-style: square; }
ul.checklist li::marker { color: #04AA6D; }

/* Custom counter with formatted numbers */
ol.steps { list-style: decimal-leading-zero; }   /* 01, 02, 03… */
Tip: For decorative custom bullets (icons, gradients), use list-style: none and draw your own marker with ::before. It's more flexible than list-style-image.

Example

Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>

<h1>CSS Lists</h1>
<div class="box">Edit the CSS on the left, then click Run &raquo;</div>

</body>
</html>
Try it Yourself »

Exercise

Strip the marker for nav menus.

ul.nav { list-style: ; padding: 0; margin: 0; }

Test yourself

Q1. Which value removes the marker entirely?
Q2. Which pseudo-element targets just the bullet or number?
Q3. A common reset for nav menus is…

Discussion

Loading…