Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
list-style

4 Articles
{
,

}
List item with bullet marker. A double-sided arrow occupies the space between the marker and the text.
Direct link to the article Everything You Need to Know About the Gap After the List Marker
list-style lists marker

Everything You Need to Know About the Gap After the List Marker

I was reading “Creative List Styling” on Google’s web.dev blog and noticed something odd in one of the code examples in the ::marker section of the article. The built-in list markers are bullets, ordinal numbers, and letters. The ::marker pseudo-element …

Avatar of Šime Vidas
Šime Vidas on Mar 2, 2023 (Updated on May 17, 2024)
Direct link to the article List Markers and String Styles
list-style list-style-type lists marker

List Markers and String Styles

Lists—we’ve all worked with them in one form or another. I’m talking about HTML’s <ol> and <ul>. Much of the time, because we desire styling control, we turn off the list’s markers completely with list-style-type: none, and start …

Avatar of Eric Meyer
Eric Meyer on Apr 29, 2021
Direct link to the article #184: Inside & Aligned Lists
list-style

#184: Inside & Aligned Lists

The fact that lists render their markers outside their own box (by default) is slightly weird. Any hidden overflow or overhanging off the edge of the browser will hide them. Moving them inside the box feels better and safer, but …

Avatar of Chris Coyier
Chris Coyier on May 5, 2020 (Updated on May 13, 2020)
Direct link to the article list-style
list-style list-style-position list-style-type

list-style

The list-style property is a shorthand property that sets values for three different list-related properties in one declaration:

ul {
  list-style: <list-style-type|| <list-style-position|| <list-style-image;
}

Here’s an example of the syntax:

ul {
  list-style: square outside none;
…
Avatar of Sara Cope
Sara Cope on Sep 5, 2011 (Updated on Apr 23, 2021)

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top