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

Question

搭配经典<ul> <li>列表，如果文本里面是 <li>超过 2 行，文本完全对齐。请参阅此片段和屏幕截图(红线显示完美对齐):

<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。它有效，但文本不对齐(第二行在自定义元素符号下。我该如何处理这个问题并让文本在第一行对齐？

查看代码片段和屏幕截图:

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>