0

So I wanted to make a list with checkmarks instead of bullet points. Therefore I decided to make a ::before pseudo-element like this:

ul{ list-style-type: none;}

li::before{
content: "\2713";
font-size: 1.2rem;
margin: 0 4px;}

While this actually works pretty well, I have the problem that once the text of the li wraps and goes on a new line, it won't align with the rest of the text (list) anymore, but would rather go on the next line under the checkmark (::before element).

Now, I already tried things like position: absolute; but that doesn't work either since the ::before element is taken out of the flow and will just go above the text of the list item. I have also tried text-indent on the li but all of this won't work. Also, since it is a ::before element and list-style-type is set to none; list-style-position: outside; won't work either.

So what do I have to do so that the text of my list item will align with the list once it wraps on a new line and doesn't go under the ::before ?

xutocode
  • 41
  • 8

1 Answers1

2

All you need to do is set the position of the ::before pseudo-element to absolute as you did before. However, make sure to set the position of the li elements to relative as well, so that any changes to the position of the ::before pseudo-elements become relative to their li. Finally, adjust the top and left values of the pseudo-element the way you want. Here is a working example.

ul {
  list-style: none;
}

li {
  position: relative;
}

li::before {
  content: "\2713";
  position: absolute;
  font-size: 1.2rem;
  top: -5px;
  left: -20px;
}
<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li>Ut sapien sapien, porttitor ac tellus sed</li>
  <li>ullamcorper tempor orci</li>
  <li>Nulla maximus nibh malesuada sem commodo molestie</li>
</ul>
bavShehata
  • 133
  • 8