css colored list item makes the text untidy

Question

I'm styling the color of a list of items by using CSS like this

.bullet {
  list-style: none;
}

.bullet li::before {
  content: "\2022";
  color: #11AAE2;
  margin-right: 12px;
  width: 10px;
  height: 10px;
}

<ul class="bullet">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut e</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad </li>
</ul>

The list bullet color changed but the problem is if the text is long, it shows like this picture below. I'm sorry I don't know how to explain this situation using English. I want all the text to start at the red line. What should I do?

score 1 · Answer 1 · answered Feb 26 '21 at 01:58

1

Add text- indent on your .bullet

.bullet {
    list-style: none;
    text-indent: -1em;
  }

it will fix it

answered Feb 26 '21 at 01:58

hake windev

21
5

well, it works! although it's not very neat but thank you!! – Feb 26 '21 at 02:04

score 0 · Answer 2 · answered Feb 26 '21 at 03:34

Check this solution.

.bullet {
    list-style: none;
}

.bullet li {
    position: relative;
    padding-left: 15px;
}

.bullet li::before {
    content: "\2022";
    position: absolute;
    top: 5px;
    left: 0;
    color: #11AAE2;
    margin-right: 12px;
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

<ul class="bullet">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut e</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad </li>
</ul>

css colored list item makes the text untidy

2 Answers2