JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li class="marker">Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
</ul>

SCSS

ul {
    line-height: 25px;
    list-style-type: none;
    font-size: 15px;
    /* а это вроде к вопросу не должно иметь отношение, но для приближенности к реальной ситуации пусть будет */
    font-family: Arial Narrow;
    font-weight: bold;
    text-transform: uppercase;
}

.marker {
    position: relative;
    
    &:before {
        display: block;
        width: 25px;
        height: 25px;
        position: absolute;
        right: 100%;
        top: 0;
        
        content: '';
        
        background: url("http://placehold.it/25x25");
    }
}