I created a bullet list that has a different color for bullet and text. It worked fine until someone called and said it was off in Chrome and Edge, but it looked perfectly fine in Firefox that I was working on. The problem is when the bullet has more than one line, the first line gets pushed further in and isn't inline with the bottom text, but this only happens in Chrome and Edge. Can any one please help?

ul.bt-bullet {
  margin-left: 0px;
}

ul.bt-bullet li {
  list-style-position: inside;
  text-indent: -1.4em;
  padding-left: 1.4em;
  padding-bottom: 10px;
  font-size: 25px;
  line-height: 25px;
  color: #F18D21 !important;
}

ul.bt-bullet li span {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  margin-left: 10px;
  color: #000000;
}

<ul >
  <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
  <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
  <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
</ul>

CodePudding user response：

The problem was with the margin-left: 10px; line.

Remove it and you will see this result:

ul.bt-bullet {
    margin-left: 0px;
}
ul.bt-bullet li {
    list-style-position: outside;
    padding-left: 1.4em;
    padding-bottom: 10px;
    font-size: 25px;
    line-height: 25px;
    color: #F18D21 !important;
}
ul.bt-bullet li span {
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    color: #000000;
}

<ul >
    <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
    <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
    <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
</ul>

CodePudding user response：

Hope this helps, commmented few lines in the CSS code. Kindly notice that.

ul.bt-bullet {
    margin-left: 0px;
}
ul.bt-bullet li {
    list-style-position: outside !important;
/*     text-indent: -1.4em; */
    padding-left: 10px;
    padding-bottom: 10px;
    font-size: 25px;
    line-height: 25px;
    color: #F18D21 !important;
}
ul.bt-bullet li span {
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
 /*   margin-left: 10px; */
    color: #000000;
}

<ul >
    <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
    <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
    <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
</ul>