Second line in li starts under the bullet after CSS-reset

user_921563 0
Viewed 155414

I'm having some problems with my ul-list after using applying CSS-reset.

When the text in the li is long and it breaks to a second line, the text begins under the bullet. I'd like it to start with the same margin/padding as the text on the right side of the bullet.

Sort of hard to explain, but if you look at the example-image. The left-image is the list today. "motta varsel [...]" begins under the bullet, but I'd like it to look the picture on the right.

How can I do this with CSS? I assume there is something very simple I've overlooked, but I can't figure out what. Google searches did not return anything useful either.

enter image description here

css html
4 Answers

I would set the fish in a :before style in css. Also you have a spelling mistake in your HTML. It should be <ul>. Font Awesome should give you the code to put into content.

li {
      padding: 0% 0% 5% 3%; 
      width: 100%;
    list-style-position: outside;
    position: relative;
    }

    li:before {
        content: '';
        position: absolute;
        width: 5px;
        height: 5px;
        background: black;
        top: 10px;
        left: -5px;
    }
<div class="col">
          
        <ul>
          <p class="col align-self-center">
          <li>5% marketing and strategic alliances</li> 
          <li>10% Metadata release (Rarity tools) Focus on community growth</li>
          <li>25% Listing in Magic Eden</li> 
          <li>50% First Donation to partners</li> 
          <li>65% Increase in marketing investment</li> 
          <li>80% Bluepaper Publication of Phase 2</li> 
          <li>100% Second Donation to partners</li> 
          </p>
        </ul>
      </div>

    </div>

user_162733740
Related