Issue with justify text in CSS

Question

I am trying to justify text on website, but I am not able to do it in right way.

My code:

<ul>
    <li style="text-align: justify;">
       ::before
        <span style="font-size: 14pt;">Text text text text text Text text text text text Text text text text text</span>
        <span style="font-size: 14pt;">taming my thick tresses, making this best for touch-up work, bangs and people with thin hair.</span>
    </li>
</ul>

CSS part:

#inbound-list.class-SyMhZJtiLv li {
   color: #000000;
   list-style: none;
   font-weight: 500;
   font-size: 16px;
   vertical-align: top;
   margin-bottom: 10px;
}

#inbound-list.class-SyMhZJtiLv li:before {
   background: transparent;
   border-radius: 50% 50% 50% 50%;
   color: #000000;
   display: inline-block;
   font-family: 'FontAwesome';
   font-size: 18px;
   line-height: 18px;
   margin-right: 0.5em;
   margin-top: 0;
   text-align: center;
}

#inbound-list.fa-list-check li:before {
   content: "\f00c";
}

It looks like:

I'd like the thext should be verticaly alligned at the red line (of cource the line is for help here).

I have not ideas anymore how to do it. Maybe do you have some ideas?

Answer 1

Is this what you need?

li {
  list-style: none;
  font-size: 16px;
  padding-left: 30px;
  position: relative;
  text-align: justify
}
li::before {
  border-radius: 50%;
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  content: "✓";
  line-height: 20px;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
}

<ul>
  <li>
    <span>Text text text text text Text text text text text Text text text text text</span>
    <span>taming my thick tresses, making this best for touch-up work, bangs and people with thin hair.</span>
    <span>Text text text text text Text text text text text Text text text text text</span>
    <span>taming my thick tresses, making this best for touch-up work, bangs and people with thin hair.</span>
  </li>
</ul>