html - 将元素符号图标更改为双引号

Question

我有一个 HTML 列表。 现在我想将元素符号图标更改为双引号图标。

我发现这很有趣 website .

所以我有如下代码:

.listStyle li:before {
  list-style: none;
  content: "\00BB";
}

<ul class="listStyle">
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
</ul>

截图是这样的:

我需要双引号图标而不是元素符号图标。 两者并不相邻。

我怎样才能做到这一点？

我需要避免的是当需要换行时该行在同一垂直线上:

Answer 1

您正在将 list-style 属性应用于伪元素而不是 li 元素。对于双引号对齐，您可以使用绝对定位:

.listStyle {
  list-style: none;
  padding-left:1.5em;
}
.listStyle li{
  position:relative;
}
.listStyle li:before {
  content: "\00BB";
  position:absolute;
  right:100%;
  width:1.5em;
  text-align:center;
}

<ul class="listStyle">
  <li>SOME TEXT<br/>second line</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
</ul>