Problem with bullet point alignment in css

Question

I would like to align the bullet point to the top, so that regardless of the number of rows it would always be at the top. However, I can not do so, I tried different content align methods, but it would not work.

.floater ul > li::before {
  content: "• ";
  color: var(--color-icergi-blue);
  font-size: 2rem;
  line-height: 0;
  margin: auto 0; 
}

Additional HTML code

<div class="floater">
<h2>Features</h2>
   <ul>
      <li><p>text</p></li>
      <li><p>text</p></li>
      <li><p>text <br>text</p></li>
      <li><p>text <br>text</p></li>
      <li><p>text <br>text</p></li>
      <li><p>text <br>text</p></li>
   </ul>
</div>

Answer 1

Your example code is pretty incomplete, but here's a way to make it work. Watch the position, margin and padding settings especially:

 ul>li { padding: 0; list-style: none; position: relative; } ul>li::before { content: "•"; font-size: 2rem; line-height: 0; margin: 0 1em 0 -1em; position: absolute; top: 9px; }

 <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li> <li>Cum sociis natoque penatibus</li> <li>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li> </ul>