Custom list style in css

Totally Custom List Styles

This is episode #5 in a series examining modern CSS solutions to problems Stephanie Eckles has been solving over the last 15+ years as a front-end dev.

This tutorial will show how to use CSS grid layout for easy custom list styling in addition to:

• Data attributes as the content of pseudo elements
• CSS counters for styling ordered lists
• CSS custom variables for per-list item styling
• Responsive multi-column lists

Update: The ::marker pseudo selector is now well supported in modern browsers. While this tutorial includes handy CSS tips for the items listed above, you may want to jump to the ::marker solution

List HTML

First we’ll setup our HTML, with one ul and one li . I’ve included a longer bullet to assist in checking alignment, spacing, and line-heihgt.

ul role="list"> li>Unordered list itemli> li>Cake ice cream sweet sesame snaps dragée cupcake wafer cookieli> li>Unordered list itemli> ul> ol role="list"> li>Ordered list itemli> li>Cake ice cream sweet sesame snaps dragée cupcake wafer cookieli> li>Ordered list itemli> ol>

Note the use of role=»list» . At first, it may seem extra, but we are going to remove the inherent list style with CSS. While CSS doesn’t often affect the semantic value of elements, list-style: none can remove list semantics for some screen readers. The easiest fix is to define the role attribute to reinstate those semantics. You can learn more from this article from Scott O’Hara.

Base List CSS

First we add a reset of list styles in addition to defining them as a grid with a gap.

ol, ul  margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; >

The gap benefit is adding space between li , taking the place of an older method such as li + li < margin-top: . >.

Next, we’ll prepare the list items:

li  display: grid; grid-template-columns: 0 1fr; gap: 1.75em; align-items: start; font-size: 1.5rem; line-height: 1.25; >

We’ve also set list items up to use grid. And we’ve upgraded an older «hack» of using padding-left to leave space for an absolute positioned pseduo element with a combo of a 0 width first column and gap . We’ll see how that works in a moment. Then we use align-items: start instead of the default of stretch , and apply some type styling.

UL: Data attributes for emoji bullets

Now, this may not exactly be a scalable solution, but for fun we’re going to add a custom data attribute that will define an emoji to use as the bullet for each list item.

First, let’s update the ul HTML:

ul role="list"> li data-icon="🦄">Unordered list itemli> li data-icon="🌈"> Cake ice cream sweet sesame snaps dragée cupcake wafer cookie li> li data-icon="😎">Unordered list itemli> ul>

And to apply the emojis as bullets, we use a pretty magical technique where data attributes can be used as the value of the content property for pseudo elements:

ul li::before  content: attr(data-icon); /* Make slightly larger than the li font-size but smaller than the li gap */ font-size: 1.25em; >

Here’s the result, with the ::before element inspected to help illustrate how the grid is working:

The emoji still is allowed to take up width to be visible, but effectively sits in the gap. You can experiment with setting the first li grid column to auto which will cause gap to fully be applied between the emoji column and the list text column.

OL: CSS counters and CSS custom variables

CSS counters have been a viable solution since IE8, but we’re going to add an extra flourish of using CSS custom variables to change the background color of each number as well.

We’ll apply the CSS counter styles first, naming our counter orderedlist :

ol  counter-reset: orderedlist; > ol li::before  counter-increment: orderedlist; content: counter(orderedlist); >

This achieves the following, which doesn’t look much different than the default ol styling:

Next, we can apply some base styling to the counter numbers:

/* Add to li::before rule */ font-family: "Indie Flower"; font-size: 1.25em; line-height: 0.75; width: 1.5rem; padding-top: 0.25rem; text-align: center; color: #fff; background-color: purple; border-radius: 0.25em;

First, we apply a Google font and bump up the font-size . The line-height is half of the applied line-height of the li (at least that’s what worked for this font, it may be a bit of a magic number). It aligns the number where we would like in relation to the main li text content.

Join my newsletter for article updates, CSS tips, and front-end resources!

Then, we need to specify an explicit width. If not, the background will not appear even though the text will.

Padding is added to fix the alignment of the text against the background.

That’s certainly feeling more custom, but we’ll push it a bit more by swapping the background-color to a CSS custom variable, like so:

ol  --li-bg: purple; > ol li::before  background-color: var(--li-bg); >

It will appear the same until we add inline styles to the second and third li to update the variable value:

ol role="list"> li>Ordered list itemli> li style="--li-bg: darkcyan"> Cake ice cream sweet sesame snaps dragée cupcake wafer cookie li> li style="--li-bg: navy">Ordered list itemli> ol>

And here’s the final ul and ol all put together:

Upgrade your algos: Multi-column lists

Our example only had 3 short list items, but don’t forget we applied grid to the base ol and ul .

Whereas in a previous life I have done fun things with modulus in PHP to split up lists and apply extra classes to achieve evenly divided multi-column lists.

With CSS grid, you can now apply it in three lines with inherent responsiveness, equal columns, and respect to content line length:

ol, ul  display: grid; /* adjust the `min` value to your context */ grid-template-columns: repeat(auto-fill, minmax(22ch, 1fr)); gap: 1rem; >

Applying to our existing example (be sure to remove the max-width on the li first) yields:

You can toggle this view by updating the $multicolumn variable in Codepen to true .

Gotcha: More than plain text as li content

If you have more than plain text inside the li — including something like an innocent — our grid template will break.

However, it’s a very easy solve — wrap the li content in a span . Our grid template doesn’t care what the elements are, but it does only expect two elements, where the pseudo element counts as the first.

Upgrading to CSS Marker

During the months after this article was originally posted, support for ::marker became much better across all modern browsers.

The ::marker pseudo selector allows directly changing and styling the ol or ul list bullet/numerical.

We can fully replace the solution for ul bullets using ::marker but we have to downgrade our ol solution because there are only a few properties allowed for ::marker :

• animation-*
• color
• content
• direction
• font-*
• transition-*
• unicode-bidi
• white-space

Unordered List Style With ::marker

Since content is still an allowed property, we can keep our data-icon solution for allowing custom emoji markers 🎉

We just need to swap ::before to ::marker :

ul li::marker  content: attr(data-icon); font-size: 1.25em; >

Then remove the no longer needed grid properties from the li and add back in some padding to replace the removed gap :

li  /* replace the grid properties with: */ padding-left: 0.5em; >

Finally, we previously removed margin but we need to add back in some left margin to ensure space for the ::marker to prevent it being cut off due to overflow:

/* update in existing rule */ ol, ul  margin: 0 0 0 2em; /* . existing styles */ >

And the visual results is identical to our previous solution, as you can see in the demo.

Ordered List Style With ::marker

For our ordered list, we can now switch and take advantage of the built-in counter.

We also have to drop our background-color and border-radius so we’ll swap to using our custom property for the color value. And we’ll change our custom property name to —marker-color for clarity.

So our reduced styles are as follows:

ol  --marker-color: purple; > li::marker  content: counter(list-item); font-family: "Indie Flower"; font-size: 1.5em; color: var(--marker-color); >

Don’t forget to update the CSS custom property name in the HTML, too!

Watch out for this gotcha: Changing the display property for li will remove the ::marker pseudo element. So if you need a different display type for list contents, you’ll need to apply it by nesting an additional wrapping element.

::marker Demo

Here’s our updated custom list styles that now use ::marker .

Be sure to check for current browser support to decide which custom list style solution to use based on your unique audience! You may want to choose to use ::marker as a progressive enhancement from one of the previously demonstrated solutions.

For more details on using ::marker , check out this excellent article by Adam Argyle.

What to Read Next

3 Popular Website Heroes Created With CSS Grid Layout This episode explores creating website heroes — aka ‘headers’ — by using CSS grid and a unique way to apply grid template areas that you can use to replace older methods that used absolute positioning.

Pure CSS Smooth-Scroll «Back to Top » «Back to top» links may not be in use often these days, but there are two modern CSS features that the technique demonstrates well: `position: sticky` and `scroll-behavior: smooth`.

CSS Tips in Your Inbox Join my newsletter for article updates, CSS tips, and front-end resources! Newsletter Signup

Modern CSS For Dynamic Component-Based Architecture Explore modern project architecture, theming, responsive layouts, and component design. Learn to improve code organization, dig into layout techniques, and review real-world, context-aware components that use cutting-edge CSS techniques.

Источник

CSS Lists

The list-style-type property specifies the type of list item marker.

The following example shows some of the available list item markers:

Example

ol.c list-style-type: upper-roman;
>

ol.d list-style-type: lower-alpha;
>

Note: Some of the values are for unordered lists, and some for ordered lists.

An Image as The List Item Marker

The list-style-image property specifies an image as the list item marker:

Example

Position The List Item Markers

The list-style-position property specifies the position of the list-item markers (bullet points).

«list-style-position: outside;» means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically. This is default:

«list-style-position: inside;» means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start:

Example

ul.a <
list-style-position: outside;
>

ul.b list-style-position: inside;
>

Remove Default Settings

Example

List — Shorthand property

The list-style property is a shorthand property. It is used to set all the list properties in one declaration:

Example

When using the shorthand property, the order of the property values are:

• list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed)
• list-style-position (specifies whether the list-item markers should appear inside or outside the content flow)
• list-style-image (specifies an image as the list item marker)

If one of the property values above is missing, the default value for the missing property will be inserted, if any.

Styling List With Colors

We can also style lists with colors, to make them look a little more interesting.

or
tag, affects the entire list, while properties added to the
tag will affect the individual list items:

Example

ol <
background: #ff9999;
padding: 20px;
>

ul background: #3399ff;
padding: 20px;
>

ol li background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
>

ul li background: #cce5ff;
color: darkblue;
margin: 5px;
>

More Examples

Customized list with a red left border
This example demonstrates how to create a list with a red left border.

Full-width bordered list
This example demonstrates how to create a bordered list without bullets.

All the different list-item markers for lists
This example demonstrates all the different list-item markers in CSS.

All CSS List Properties

Property	Description
list-style	Sets all the properties for a list in one declaration
list-style-image	Specifies an image as the list-item marker
list-style-position	Specifies the position of the list-item markers (bullet points)
list-style-type	Specifies the type of list-item marker

Источник