liを使用してhtmlリストのテキストをカスタムの箇条書きに合わせるにはどうすればよいですか？

Question

古典的な<ul> <li>のリストでは、<li>の中にあるテキストが2行以上ある場合、texteは完全に整列します。 （赤い線が完璧な整列を示して）このスニペットANSのスクリーンショットを参照してください。

<ul> 
 
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget pellentesque sem, sed condimentum orci. Sed ut justo nisl. Fusce sed justo eget nisl euismod congue in non lectus. Nulla nibh tortor, suscipit at aliquet pellentesque, varius ut mauris. Cras id ipsum eget lorem consequat lacinia. Sed aliquet aliquam feugiat.</li> 
 
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget pellentesque sem, sed condimentum orci. Sed ut justo nisl. Fusce sed justo eget nisl euismod congue in non lectus. Nulla nibh tortor, suscipit at aliquet pellentesque, varius ut mauris. Cras id ipsum eget lorem consequat lacinia. Sed aliquet aliquam feugiat.</li> 
 
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget pellentesque sem, sed condimentum orci. Sed ut justo nisl. Fusce sed justo eget nisl euismod congue in non lectus. Nulla nibh tortor, suscipit at aliquet pellentesque, varius ut mauris. Cras id ipsum eget lorem consequat lacinia. Sed aliquet aliquam feugiat.</li> 
 

 
</ul>

今

、私はので、私は、CSSのように変更した弾丸の色を変更する必要がありましたこの。それは動作しますが、テキストは（2行目は、カスタムの箇条書きの下で揃えされていませんどのように私はこれを扱うことができ、テキストが1行目に合わせる必要があり

参照スニペットとスクリーンショット：。？

ul { 
 
    list-style: none; 
 
} 
 

 
ul li::before { 
 
    content: "\002022"; 
 
    color: #d4b340; 
 
    padding-right: 18px 
 
}

<ul> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget pellentesque sem, sed condimentum orci. Sed ut justo nisl. Fusce sed justo eget nisl euismod congue in non lectus. Nulla nibh tortor, suscipit at aliquet pellentesque, varius ut mauris. 
 
    Cras id ipsum eget lorem consequat lacinia. Sed aliquet aliquam feugiat.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget pellentesque sem, sed condimentum orci. Sed ut justo nisl. Fusce sed justo eget nisl euismod congue in non lectus. Nulla nibh tortor, suscipit at aliquet pellentesque, varius ut mauris. 
 
    Cras id ipsum eget lorem consequat lacinia. Sed aliquet aliquam feugiat.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget pellentesque sem, sed condimentum orci. Sed ut justo nisl. Fusce sed justo eget nisl euismod congue in non lectus. Nulla nibh tortor, suscipit at aliquet pellentesque, varius ut mauris. 
 
    Cras id ipsum eget lorem consequat lacinia. Sed aliquet aliquam feugiat.</li> 
 
</ul>

Answer 1

絶対位置を使用して:before要素を追加

ul { 
 
    list-style: none; 
 
} 
 
ul li { 
 
    position:relative; 
 
    padding-left:20px; 
 
} 
 
ul li::before { 
 
    content: "\002022"; 
 
    color: #d4b340; 
 
    padding-right: 5px; 
 
    left:0; 
 
    position: absolute; 
 
}

<ul> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget pellentesque sem, sed condimentum orci. Sed ut justo nisl. Fusce sed justo eget nisl euismod congue in non lectus. Nulla nibh tortor, suscipit at aliquet pellentesque, varius ut mauris. 
 
    Cras id ipsum eget lorem consequat lacinia. Sed aliquet aliquam feugiat.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget pellentesque sem, sed condimentum orci. Sed ut justo nisl. Fusce sed justo eget nisl euismod congue in non lectus. Nulla nibh tortor, suscipit at aliquet pellentesque, varius ut mauris. 
 
    Cras id ipsum eget lorem consequat lacinia. Sed aliquet aliquam feugiat.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget pellentesque sem, sed condimentum orci. Sed ut justo nisl. Fusce sed justo eget nisl euismod congue in non lectus. Nulla nibh tortor, suscipit at aliquet pellentesque, varius ut mauris. 
 
    Cras id ipsum eget lorem consequat lacinia. Sed aliquet aliquam feugiat.</li> 
 
</ul>

または別の方法:before要素

ul li{ 
 
    color: #d4b340; 
 
} 
 
ul li p{ 
 
    color:#000; 
 
}

<ul> 
 
    <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget pellentesque sem, sed condimentum orci. Sed ut justo nisl. Fusce sed justo eget nisl euismod congue in non lectus. Nulla nibh tortor, suscipit at aliquet pellentesque, varius ut mauris. 
 
    Cras id ipsum eget lorem consequat lacinia. Sed aliquet aliquam feugiat.</p></li> 
 
    <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget pellentesque sem, sed condimentum orci. Sed ut justo nisl. Fusce sed justo eget nisl euismod congue in non lectus. Nulla nibh tortor, suscipit at aliquet pellentesque, varius ut mauris. 
 
    Cras id ipsum eget lorem consequat lacinia. Sed aliquet aliquam feugiat.</p></li> 
 
    <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget pellentesque sem, sed condimentum orci. Sed ut justo nisl. Fusce sed justo eget nisl euismod congue in non lectus. Nulla nibh tortor, suscipit at aliquet pellentesque, varius ut mauris. 
 
    Cras id ipsum eget lorem consequat lacinia. Sed aliquet aliquam feugiat.</p></li> 
 
</ul>

Answer 2

使用text-indent

ul { 
 
    list-style: none; 
 
} 
 

 
ul li { 
 
    text-indent: -1.5em 
 
} 
 

 
ul li::before { 
 
    content: "\002022"; 
 
    color: #d4b340; 
 
    padding-right: 18px 
 
}

<ul> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget pellentesque sem, sed condimentum orci. Sed ut justo nisl. Fusce sed justo eget nisl euismod congue in non lectus. Nulla nibh tortor, suscipit at aliquet pellentesque, varius ut mauris. 
 
    Cras id ipsum eget lorem consequat lacinia. Sed aliquet aliquam feugiat.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget pellentesque sem, sed condimentum orci. Sed ut justo nisl. Fusce sed justo eget nisl euismod congue in non lectus. Nulla nibh tortor, suscipit at aliquet pellentesque, varius ut mauris. 
 
    Cras id ipsum eget lorem consequat lacinia. Sed aliquet aliquam feugiat.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget pellentesque sem, sed condimentum orci. Sed ut justo nisl. Fusce sed justo eget nisl euismod congue in non lectus. Nulla nibh tortor, suscipit at aliquet pellentesque, varius ut mauris. 
 
    Cras id ipsum eget lorem consequat lacinia. Sed aliquet aliquam feugiat.</li> 
 
</ul>

を追加する必要はありません