Question

HTML：

<ul>
    <li>eins</li>
    <li>zwei</li>
    <li>drei</li>
</ul>

CSS：

li::before {
  content: "– " " ";
}
li {
  list-style: outside none none;
  padding: 0 0 0 10px;
  text-indent: -10px;
}

我想在每个-的{{1}}之后添加一个额外的空格。我试过了：

li

但它不起作用。我该如何添加呢。

感谢托马斯

Answer 1

您可以通过向其添加padding-right来缩小空间。

喜欢这个

li::before {
  content: "+";
  padding-right: 10px;
}
li {
  list-style: outside none none;
  padding: 0 0 0 10px;
  text-indent: -10px;
}

<ul>
    <li>eins</li>
    <li>zwei</li>
    <li>drei</li>
</ul>

Answer 2

您可以在css \00a0

中使用content（unicode）

content: "–\00a0\00a0\";

尝试：https://jsfiddle.net/Lh6ro16g/

Answer 3

将:before与position: absolute放在一起，并在padding-left上增加/减少<li>，以便根据需要设置缩进。此方法允许您将文本垂直对齐，即使它是多行。

＆＃13;

li::before {
  position: absolute;
  content: "–";
  top: 1px;
  left: 0;
}
li {
  list-style: outside none none;
  padding-left: 20px;
  position: relative;
}

＆＃13;

<ul>
    <li>eins</li>
    <li>zwei</li>
    <li>drei</li>
    <li>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</li>
</ul>

＆＃13;

Answer 4

你可以根据需要在li上使用padding-right来增加/减少空间。

<ul>
<li>eins</li>
<li>zwei</li>
<li>drei</li>
enter</ul>

li:before {
    content: "-";
    padding-right: 20px;
}
li{
    list-style:outside none;

    }

在li-style-element上添加额外的空间

4 个答案: