Question

我想在其中一个项目中使用“*”。我已经将Pseudo类用于其中一个元素。但是我在下面的例子中的“text2”之前看到了一些空格到伪li元素

li {
  list-style: none;
}

li.str:before {
  content: "*";
  position: relative;
  left: -15px;
  bottom: -3px;
}

<ul>
  <li>text1</li>
  <li class="str">text2</li>
</ul>

你能帮我吗

Answer 1

将li标签设置为相对位置，将伪元素设置为绝对位置：

＆＃13;

li {
  position: relative;
  list-style: none;
}
li.str:before {
  content: "*";
  position: absolute;
  left: -15px;
  bottom: -3px;
}

＆＃13;

<ul>
  <li>text1</li>
  <li class="str">text2</li>
</ul>

＆＃13;

Answer 2

使用图片

http://jsbin.com/vitumerahe/edit?html,css,output

ul {
  list-style-image: url("http://4.bp.blogspot.com/-mpLQ5__-L-I/VJRpKS3KtGI/AAAAAAAAMXA/YfYAJql--mU/s1600/star.png")
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <ul>
    <li>text1</li>
    <li>text2</li>
  </ul>



</body>

</html>

Answer 3

不必使用列表。您可以在文本之前使用html代码，如下所示

&#42;

输出

* Text1
* Text2
* Text3

等等......

如何在列表项而不是项目符号中使用星号

3 个答案: