Your Guide to CSS list-style [+ Other Ways to Style Lists]

There’s a good chance you know someone in your life who’s obsessed with making lists. They make grocery lists, bucket lists, and to-do lists, just for the satisfaction of crossing things off. Heck, I’m one of those people.

But really, what’s not to love about lists? They’re an efficient way to convey information on a website, whether it’s a list of product features, a list of step-by-step instructions, or a list of ingredients for a recipe. They just make sense.

Which is why, as someone learning front-end, you should take pride in your lists. Don’t just code them — make them stand out. Luckily, it doesn’t take much work to elevate a list element with HTML and CSS. In this post, I’ll show you how.

How do you style lists with CSS?

HTML has two primary kinds of lists:

• Unordered lists (<ul>): In these lists, the order of the items is not important, such as items in a grocery list. Each list item is designated by a bullet point marker by default.
• Ordered lists (<ol>): In these lists, the order of the items matters, such as steps in an instructional guide. Each list item is designated by a number by default.

Here are examples of both list types with no styling applied:

See the Pen css list style - unstyled list examples by HubSpot (@hubspot) on CodePen.

For basic purposes, both these list elements work fine — they convey all the information necessary. But you’re not here for that. No, you’re here because you want that extra bit of visual flair. Thankfully, that’s easy to do with a bit of CSS.

There are a few different ways to add styling to lists with CSS, depending on the effect you want to achieve. In this post, we’ll cover the following methods:

• the list-style-type property
• the list-style-image property
• the list-style-position property
• the list-style shorthand property
• The ::marker pseudo-element

list-style-type

The list-style-type property sets the marker of a list element or list item element. A marker is a character (or group of characters) that indicates the start of a new list item.

Below are examples of all list-style-type values for unordered lists. For each one, list-style-type is applied to the parent <ul> element, and all child <li> elements inherit this property. Also, notice that the value none removes the markers entirely.

See the Pen css list style - list-style-type, ul by HubSpot (@hubspot) on CodePen.

Next, let’s look at some examples of list-style-type values that you can use on ordered lists. These are useful if you want to preserve the numbering in your list but change how the numbers are presented.

See the Pen css list style - list-style-type, ol by HubSpot (@hubspot) on CodePen.

We can also target individual list items with list-style-type. Say I want the markers of some list items to look different from the rest — I’ll target just the <li> elements with CSS to achieve this.

See the Pen css list style - list-style-type, li by HubSpot (@hubspot) on CodePen.

Targeting <li> elements individually like this can come in handy if you want to emphasize one list item in particular for its importance, or less-importance. See below.

See the Pen css list style - list-style-type, li by HubSpot (@hubspot) on CodePen.

list-style-image

Like the list-style-type property, list-style-image also lets you change the appearance of the markers in a list. The difference is that list-style-image sets an image as the marker, which is useful if you want to use a custom symbol or graphic for your marker.

To use it, place the Image Source as a URL as the value of list-style-image, like so:

See the Pen css list style - list-style-image by HubSpot (@hubspot) on CodePen.

I think a smiley face is appropriate here, as cheesy garlic bread always makes me happy.

Also notice that I included a list-style-type declaration. This determines the marker in case the image doesn’t load for whatever reason. If you don’t include list-style-type and the image doesn’t load, the browser will default to bullet points (or disc, as CSS calls them).

list-style-position

The list-style-position property sets the position of our list markers. When a <ul> or <ol> element is created, the list item text is placed in its own box, and this box is separated from its marker by whitespace. You can use list-style-position to change this.

list-style-position can take two values:

• outside: This places the marker outside of the list item text box. If no list-style-position is specified, this is the default behavior.
• Inside: This places the marker inside the list item box, so the marker appears flush with the list text.

Here’s what both values look like in action. I’ve placed both lists inside a div to more clearly demonstrate the effect — see how the bullets in the second list are indented?

See the Pen css list style - list-style-position by HubSpot (@hubspot) on CodePen.

list-style

We’ve covered three properties so far that let you change the appearance of your lists. But, I’d be remiss if I didn’t mention list-style.

list-style is a shorthand property that combines list-style-type, list-style-position, and list-style-position in that order. I’d recommend using list-style (and shorthand properties in general) to make your code more concise. Here’s the property in action:

See the Pen css list style - list-style by HubSpot (@hubspot) on CodePen.

::marker pseudo-element

Finally, let’s discuss the ::marker pseudo-element. This pseudo-element represents the marker of a list item. You can target this pseudo-element with CSS styles to change its appearance, including size, color, font, and weight.

You can even choose the character that’s used for the marker with the content properties. If you’re making a cookie recipe, why not use a cookie emoji instead of the standard bullets for your ingredient list?

Here are some examples of targeting the ::marker pseud-element with CSS:

See the Pen css list style - marker by HubSpot (@hubspot) on CodePen.

Give your lists a twist.

The <ol> and <ul> elements are some of the first HTML elements you learn when starting out. They get the job done, but I don’t think I’m alone when saying that sometimes they can look a bit — err — basic.

The good news is that a little bit of CSS goes a long way. With the list-style property or the ::marker pseudo-element, you can create lists that better match the theme of your website and add a small delight moment for lucky visitors.