DarSta DarSta - 16 days ago 5
CSS Question

Issue with justify text in CSS

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:
enter image description here

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

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

Answer

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>

Comments