Wie wird Text von der Kugel weggewickelt?

Question

Gibt es Weg, um den Text weg von der Kugel zu wickeln, wie mit list-style-position: outside, sondern mit meinem benutzerdefinierten Pseudo-Element-Kugel statt?

div { 
 
    width: 250px 
 
} 
 

 
ul { 
 
    padding: 10px; 
 
    list-style: none; 
 
} 
 

 
ul>li::before { 
 
    padding-right: 10px; 
 
    position: relative; 
 
    top: 5px; 
 
    font-size: 2em; 
 
    content: "\2022"; 
 
    color: #fee100; 
 
}

<div> 
 
    <ul> 
 
    <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li> 
 
    <li>VLorem Ipsum is simply dummy text of the printing.</li> 
 
    </ul> 
 
</div>

Answer 1

können Sie absolute Position anstelle von relativer Verwendung mit negativen Werten:

div { 
 
    width: 250px 
 
} 
 

 
ul { 
 
    padding: 10px; 
 
list-style: none; 
 
} 
 

 
ul>li { 
 
position:relative; 
 
} 
 

 
ul>li::before { 
 
    padding-right: 10px; 
 
    position: absolute; 
 
    left:-15px; 
 
    top:-10px; 
 
    font-size: 2em; 
 
    content: "\2022"; 
 
    color: #fee100; 
 
}

<div> 
 
    <ul> 
 
    <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li> 
 
    <li>VLorem Ipsum is simply dummy text of the printing.</li> 
 
    </ul> 
 
</div>