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

我有一个HTML格式的列表。
现在我要将项目符号图标更改为双引号图标。
我发现这很有趣。
所以我有如下代码：

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

截图如下：
website
我需要双引号图标而不是项目符号图标。
不是两个都挨着。
我怎样才能做到这一点？
我需要避免的是，当需要换行时，该行位于同一垂直行中：

最佳答案

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