Html CSS-list元素被：before指令推出位置

我有一个HTML列表的问题，我正在努力与CSS样式

问题是我想使用

：before

伪元素来设置列表元素的样式，这样我就可以执行以下操作：

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

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

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

<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; */
}

为此，我使用了一些CSS，其中我使用

：before

指令在每个条目之前添加了一些样式。源代码看起来有点像这样：

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

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

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

<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; */
}

这与预期一样有效，但是当我得到一个长列表项时，我会得到如下结果：

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

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

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

<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; */
}

我找不到避免这种情况的方法，所以我将我的项目内容放在

span

中，这样我就可以像这样屏蔽它：

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

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

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

<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; */
}

但现在我遇到了一个问题，如果我将位置设置为相对位置，我会得到以下结果：

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

然而，如果我将位置设置为绝对位置，它们将与选择器前面的

：正确对齐，但长内容将直接显示在下一个列表项上，将字母变成混乱的混乱。有一个问题

调整其他样式组件（例如
float
ing everything）似乎并不能阻止这两种行为之一的发生。我找到的最接近的方法是在内容范围上设置
max width
，同时将其配置为
block
显示，但随后我的
：before
块由于某种原因下沉到底部

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

如何创建这样一种情况，即我的“before”块位于文本内容之前，并且无论列表项中有多少行文本，我的文本都保持在块的右侧缩进？
在伪元素上使用绝对定位，在跨度上使用左边距


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 */
}