css - 在 文本和之前的内容之间添加间距

Question

我想实现这样的目标:

000 Lorem ipsum 
    dolor

0   Lorem ipsum 
    dolor

这是我正在使用的代码:

<ul>
  <li>Lorem ipsum dolor sit amet, sed do eiusmo</li>
  <li>Lorem ipsum dolor sit amet elit</li>
</ul>

CSS:

li:before {
  content: "0";
}
li:first-child:before {
  content: "000";
}
ul {
  width:100px;
  list-style: none;
}

你能帮我用 CSS 让文本与之前的内容保持相同的距离吗？

“Lorem”和“dolor”需要保持在同一条“垂直线”。

https://jsfiddle.net/ga6r8qsz/

谢谢。

Answer 1

您可以在 before 元素上使用绝对定位来做到这一点。这将确保您的 li 元素将保持垂直对齐。

li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 15px;
}

li::before {
  content: "0";
  position: absolute;
  width: 35px;
  left: -35px;
}

li:first-child::before {
  content: "0000";
}

ul {
  width: 100px;
  list-style: none;
}

<ul>
  <li>Lorem ipsum dolor sit amet, sed do eiusmo</li>
  <li>Lorem ipsum dolor sit amet elit</li>
</ul>