2

What I have:

An unordered list that uses a Unicode character for the bullets.

I achieved this using this answer to this question: Unicode character as bullet for list-item in CSS

My problem:

The solution I'm using is only effective for single-line list-items. For multi-line list-items, the text of the second line (and all following lines), rather than indenting, drops beneath the bullet.

My code:

ul {
  list-style: none;
  padding: 0px;
}

ul li:before {
  content: '\2713';
  margin: 0 1em;
  /* any design */
}
<ul>
  <li>Single-line.</li>
  <li>Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line.
    Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line.</li>
</ul>

My question:

Is there a CSS solution (without editing mark-up) that will prevent text dropping under the Unicode bullet?

Clarus Dignus
  • 3,847
  • 3
  • 31
  • 57

2 Answers2

3

You could use display: flex property on li elements. Or you could use display: table on li element and display: table-cell on pseudo-element. DEMO

ul {
  list-style: none;
  padding: 0px;
}
li {
  display: flex;
}
ul li:before {
  content: '\2713';
  margin: 0 1em;
}
<ul>
  <li>Single-line.</li>
  <li>Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line.
    Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line.</li>
</ul>
Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
  • I've opted to set `display:flex;`. Very simple and efficient. Thanks for a pure CSS solution. I originally thought I would have wrap the list-item text in ``. – Clarus Dignus Mar 30 '18 at 22:21
  • For the `display: table-cell;` I had to assign the bullet's margin values to padding as the margin values are ignored ([fork](https://jsfiddle.net/Clarus_Dignus/woqp8rvc/4/)). For the `display: flex;` method, any list-items containing a link, squashes the link to the right of the list-item. I was unable to resolve this but you can view the problem in action [here](https://jsfiddle.net/Clarus_Dignus/2ekzwyn5/5/). – Clarus Dignus Mar 31 '18 at 17:23
  • 1
    Easiest solution with flex is to wrap `li` content in one `div` element like this https://jsfiddle.net/2ekzwyn5/7/ – Nenad Vracar Mar 31 '18 at 17:59
1

Give li a left padding and then use the same value for the width of the li:before and the same value but negative for the left margin of li:before. Remember to display li:before as inline-block otherwise the width will not be applied:

ul {
  list-style: none;
  padding: 0;
}

li {
  padding-left: 2em;
}

ul li:before {
  content: '\2713';
  display: inline-block;
  width: 2em;
  margin-left: -2em;
}
<ul>
  <li>Single-line.</li>
  <li>Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line.
    Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line.</li>
</ul>
Racil Hilan
  • 24,690
  • 13
  • 50
  • 55