无法在列表中自定义项目符号

Question

我正在尝试为特定 < div > 标签内的列表自定义项目符号。为此，我创建了一个与 < div > 标签关联的 class，并且在我的 CSS 样式表中，我要求在该标签内的列表中找到我想要的项目符号。然而，子弹并没有按照我想要的方式出现。该代码似乎有效，因为我可以在 CSS 样式中添加其他自定义（例如，使列表的文本更大），并且有效。

我正在为我的网站使用 Spip；也许你们中有些人不熟悉它：在我网站的后台，我创建了一个名为 TAKE_WITH_YOU 的输入区域，这就是列表所在的位置。 Spip 将列表转换为有效的 HTML 列表（ul 和 li），但我无法直接访问此代码。

这是我的 HTML 代码：

但是，尽管有这些更改，项目符号的默认样式并没有改变。代码似乎工作正常，因为正如我之前所说，我可以通过更改 CSS 来更改字体大小，如果我将 none 放在ul list-style-type，子弹确实消失了。但是，任何其他值（圆盘、正方形、图像、十六进制代码）都会让我回到原来的项目符号...

.take_it ul {
    list-style-type: "A1";
    /*
    I have also tried with:
    list-style-image: url(puce-blanche.gif);
    And with
    list-style-type: "□";
    */
}

.take_it li::before {
    content: "A1";
    /*Also tried with other values as above*/
    position: absolute;
    left: 0;
}

<BOUCLE_150(MOTS){titre=« 150. take_with_you »}>
#SET{ident_div,#TEXTE*}
#SET{title_div,#DESCRIPTIF}
</BOUCLE_150>

[(#TAKE_WITH_YOU*|oui)
<div id="#GET{ident_div}" class=« take_it »>
<h3>[(#GET{title_div}|textebrut)]</h3>
[(#TAKE_WITH_YOU*|cs_decoupe_compat|propre)]
</div>
]

我做错了什么？谢谢。

Answer 1

您可以使用list-style:none自定义列表样式。通过查看您的代码，我假设您正在尝试使用 :before 伪 class 来显示自定义列表样式。

ul {
  list-style: none;
  position: relative;
  padding: 0;
  margin:0;
}
li {
  margin-left: 20px;
}
li:before {
  content: "A1";
  position: absolute;
  left: 0;
}

<ul>
<li>Take this</li>
<li>Take this one too</li>
<li>Take this one last time</li>
</ul>

无法在列表中自定义项目符号

cannot custom bullets in list

html

css

list

bulletedlist