CSS for Lists
Bullets
- Juice
- Milk
- Bread
- Cheese
list-style-type: square;
- Juice
- Milk
- Bread
- Cheese
::marker
pseudo-element
.red_bullets li::marker {
color: red;
}
- Juice
- Milk
- Bread
- Cheese
.stars li::marker {
content: "\2605 ";
text-align: left;
}
- Juice
- Milk
- Bread
- Cheese
list-style-image: url(/images/logos/html5.svg);
.html_list {
list-style-image: url(/images/logos/html5.svg);
}
- Paragraphs
- Lists
- Tables
- Figures
::marker
pseudo-element
.css_list {
list-style-image: url(/images/logos/css3.svg);
}
.css_list li {
line-height: .6;
}
.css_list li::marker {
font-size: 2rem;
}
- Colors
- Typography
- Layout
- Media Queries
Due to the lack of control over certain aspects of the images in bullets the CSS can be written to remove the actual bullets from the list, and put background images in place of the bullets.
- Underscore
- jQuery
- React
- Node
.js_list {
padding-left: 1rem;
list-style-type: none;
}
.js_list li {
background-image: url(/images/logos/css3.svg);
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
padding-left: 1.2rem;
}
While this uses more code, sometimes that’s the trade off for getting your HTML to look exactly how you want it to.
Numbers
- One
- Two
- Three
- Four
::marker
pseudo-element
- One
- Two
- Three
- Four
.blue_numbers li::marker {
color: blue;
font-size: 2rem;
line-height: 0;
}
list-style-position: inside;
and list-style-type: upper-roman;
- One
- Two
- Three
- Four
CSS Counters
CSS counters can help you replicate how numbered lists work.