Css: Control space between bullet and `<li>`

html

css

bullets

browser-compatibility

byNikita Barsukov·Aug 5, 2024

Control space between a list bullet and <li> using CSS padding. Keep the bullet inside the list box model with list-style-position: inside; on the <ul>. Adjust padding-left on <li>:

ul {
  list-style-position: inside;
}

li {
  padding-left: 20px; /* control the mystery gap between bullet and text */
}

<ul>
  <li>Best item</li>
  <li>Second best item</li>
  <li>Honorable mention</li>
</ul>

Update 20px according to your aesthetic senses.

Master class for bullet-chasers

The pseudo magic: custom bullets with ::before

ul {
  list-style-type: none;
}

li::before {
  content: "•"; /* feel free to pick your own favorite bullet */
  color: black; /* choose your bullet's attire */
  display: inline-block;
  width: 1em; 
  margin-left: -1em; /* plays "never gonna give you up" by Rick Astley */
}

li {
  padding-left: 0; /* by switching off, we let ::before steal the limelight */
}

Text wrapping party trick

Want flexible multiline text that doesn't wrinkle at the sight of bullets? Here's how:

li span {
  position: relative;
  left: 20px; /* maintains a respectful distance from the bullet */
}

<ul>
  <li><span>When bullets and text go for a walk, the bullet pesters about the space distance.</span></li>
</ul>

Bullet's got a brand new image

To choose a bullet that's a spitting image of you:

li {
  background-image: url('your-face.png');
  background-repeat: no-repeat;
  background-position: left;
  padding-left: 40px; /* enough space to admire yourself */
}

Peeling the complex layers

Happily nested lists

Ever come face to face with nested <ul> or <ol> and wondered "What now?" Here's what:

ul ul { /* The indie rock band of list items */
  padding-left: 30px; /* more elbow room */
}

ul ul li { 
  padding-left: 15px; /* introvert list item */
}