如何使用li :: before将html列表中的文本与自定义项目符号对齐

Question

使用经典<ul> <li>列表，如果<li>内的文字位于2行以上，则texte完全对齐。看到这个片段和屏幕截图（红线显示完美对齐）：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

现在，我不得不改变子弹颜色，所以我修改了这样的CSS。它工作但文本没有对齐（第二行在自定义项目符号下。我如何处理它并在第一行上有文本对齐？

请参阅代码段和屏幕截图：

＆＃13;

＆＃13;

ul {
  list-style: none;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用绝对位置

添加:before元素

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

或其他方式无需添加:before元素

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用text-indent

＆＃13;

＆＃13;

ul {
  list-style: none;
}

ul li {
  text-indent: -1.5em
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;