html - CSS - 列表元素被 :before directive 推出位置

Question

我有一个 HTML 列表的问题，我正在努力使用 CSS 设置样式。

问题是我想使用 :before 伪元素来设置我的列表元素的样式，这样我就可以做这样的事情:

   |- Item 1
   |- Item 2
   |- Item four

为此，我使用了一些 CSS，其中我使用 :before 指令在每个条目之前添加了一些样式。源代码看起来有点像这样:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <!-- and so on -->
</ul>

样式如下:

li:before 
{
    content: "";
    display: inline-block;
    width: 2em;
    height: 1em;
    position: relative;
    background-color: orange;

}

这按预期工作，但是当我得到一个长列表项时，我得到如下结果:

|- Item 1
|- Item 2
|- Item four number four fourth item item
 the fourth and so on.

我找不到避免这种情况的方法，所以我将我的元素内容放入 span 中，这样我就可以像这样阻止它:

<ul>
  <li><span class='li-content'>Short content</span></li>
  <li><span class='li-content'>Long content long content long content long content long content</span></li>
   <li><span class='li-content'>Short content</span></li>
</ul>

我的完整样式表如下所示:

ul 
{
   width: 20em;
   list-style-type: none;
   border: 1px solid grey;
   padding: 1em;
}
li
{
   clear: both;
}
li:before 
{
    content: "";
    display: inline-block;
    width: 2em;
    height: 1em;
    position: relative;
    background-color: orange;

}
.li-content
{
     display: inline-block;
   /* position: absolute; */
}

但是现在我遇到了一个问题，如果我将位置设置为relative，我会得到这个:

|- Short content
|-
 Long content long content long content 
 long content
|- Short content

而如果我将位置设为 absolute，它们将与 :before 选择器正确对齐，但长内容会直接出现在下一个列表项上方，将字母变成令人困惑的困惑有一个 Fiddle here .

调整其他样式组件(例如 float 一切)似乎并不能阻止这两种行为之一的发生。我发现最接近的是在内容跨度上设置 max-width ，同时它被配置为 block 显示但是然后我的 :before block 由于某种原因沉到底部。

|- Short content
   Long content long content long content 
|- long content
|- Short content

我可以做些什么来创建这样一种情况，即在我的文本内容之前有一个“之前” block ，并且无论我的列表项中有多少行文本，我的文本都保持在该 block 的右侧缩进？

Answer 1

在伪元素上使用绝对定位，在 span 上使用 margin-left

JSfiddle Demo

CSS

ul 
{
   width: 20em;
   list-style-type: none;
   border: 1px solid grey;
   padding: 1em;
}
li {
   clear: both;
   position: relative;
}
li:before {
    content: "";
    display: inline-block;
    top:0;
    left:0;
    width: 2em;
    height: 1em;
    position: absolute;
    background-color: orange;

}
.li-content {
    display: inline-block;
    margin-left: 2.5em; /* approx based on width of :before - YMMV */
}