将项目符号图标更改为双引号

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>

Answer 2

您可以通过执行以下操作来更改项目符号：

ul {
  list-style: none;
  padding-left:0px;
}
ul li:before {
  content: "\00BB";
}

<ul>
  <li>text</li>
  <li>text</li>
</ul>

padding-left:0px;将删除左边的填充，因此它不再有缩进。

Answer 3

这样可以防止新线条包裹在子弹下面：

.listStyle li {
    list-style: none;
}
.listStyle li:before {
  display: inline-block;
  width: 1em;
  margin-left: -1em;
  content: "\00BB";
}