How can I ensure the <li> text is properly indented (see problem third from bottom) when using custom bullet points with empty psuedo element
ul {
list-style: none;
li {
position: relative;
span {
font-size: 14px;
line-height: 22px;
font-weight: $fw-bold;
margin: 4px 0;
}
&:before {
content:'';
display: inline-block;
height: 11px;
width: 4px;
background-color: rgba(254, 80, 0, 0.4);
margin-right: 16px;
}
}
}
<ul>
<li><span>Application individuelle pour les joueurs</span></li>
<li><span>Accès Dashboard centralisé pour les coachs</span></li>
<li><span>Formation initiale (VFC + inCORPUS)</span></li>
<li><span>2 interventions thématiques d'1 jour</span></li>
<li><span>Accompagnement expert toute l’année</span></li>
<li><span>Nombre illimité de check-ups à distance</span></li>
<li><span>Gestion autonome des équipes</span></li>
<li><span>Paramétrage de l’accès aux résultats des tests pour les joueurs</span></li>
<li><span>Cardio-fréquencemètres inCORPUS</span></li>
<li><span>Assistance technique au quotidien</span></li>
</ul>
I also tried text-indent: -1em; per the solution below but it only works if there is text content in content: ''
