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

Question

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

我发现这很有趣 website。

所以我有如下代码：

.listStyle li:before {
  list-style: none;
  content: "[=10=]BB";
}

<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: "[=10=]BB";
  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: "[=10=]BB";
}

<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: "[=10=]BB";
}

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

Change bullet icon to double quote

html

css

html-lists

pseudo-element