箇条書きからテキストを外す方法は？

Question

list-style-position: outsideを使用しているのと同じように、代わりに私のカスタム擬似要素の箇条書きを使用して、テキストを折り返すようにしますか？

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

あなたは負の値と相対するのではなく、絶対位置を使用することができます。

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>