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

【问题标题】：Change bullet icon to double quote将项目符号图标更改为双引号
【发布时间】：2015-12-14 15:27:29
【问题描述】：

我有一个 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>

截图如下：

我需要双引号图标而不是项目符号图标。不是两个相邻。

我怎样才能做到这一点？

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

【问题讨论】：

标签： html css html-lists pseudo-element

【解决方案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>

【讨论】：

感谢您的帮助。我仍然遇到的问题是文本与列表图标对齐。但是当需要换行时，列表图标必须位于左侧文本旁边。我将更新我的帖子以显示我需要避免的事情
向<li> 添加内边距并为伪元素添加负边距应该可以工作
@jublikon 我用双引号对齐的解决方案更新了答案
@jublikon 我在ul 元素的左侧添加了一些空格，并在伪元素和text-align:center; 上以宽度居中双引号
对我来说很好用！谢谢

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

这将防止新行在项目符号下方换行：

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

【讨论】：