Html 使用数字以及定义和解释格式化列表

我有一个术语表列表，我需要将其格式化为：

1个苹果红色多汁水果

其中1和定义（苹果）均为红色，说明为灰色。当前我的列表如下所示：

我得到的最接近的是“目标/无目标”的定义，但这里的问题是我需要灰色文本在解释的开头进行，而不是定义

以下是列表的代码：

HTML:

---

任何帮助都将不胜感激

如果您想在定义下进行解释：

<ul>
    <li>
        1 Apple - <div class="divText">Home team exact number of goals at the end of normal time.</div>
    </li>

    <li>
        2 Apple - <div class="divText">Red juicy fruit.</div>
    </li>

</ul>

顺便说一句。。你不应该在LI的中间使用DIV，而应该为计数器使用绝对定位的伪元素

2） 对定义使用绝对定位的伪元素

3） 如果要在解释下运行文本，请在列表项上使用

padding left

ul {
    counter-reset: itemCounter;
    list-style:none;
}
li {
    padding-left: 75px;
    counter-increment: itemCounter;
    position:relative;
}
li:before {
    content: counter(itemCounter);
    position: absolute;
    left:0;
    color: purple;
}
li:after {
    content: attr(data-item)  ' - \00a0';
    position: absolute;
    left:15px;
    top:0;
}

---

不幸的是，客户不希望：（他们希望所有文字都是一行，如果文字在上面，就必须在解释的下面。你是不是在尝试类似的东西？为什么不使用定义列表？有点，除了如果解释文字超过一行，它应该从解释的开始处而不是红色的定义处继续finition list++float和overflow会这样做吗？添加数字我不确定当您在您这边查看时，它是否正确呈现，但在我这边，它使每个列表项缩进比之前的缩进多一点？float可能需要清除：dt{clear:left}我不能使用列表样式类型，因为数字需要设置样式，除了使用before伪代码将内容设置为计数器外，我不知道任何其他方式来设置列表数字的样式element@user3631090-我使用计数器更新了解决方案-查看

<ul>
    <li>
        1 Apple - <div class="divText">Home team exact number of goals at the end of normal time.</div>
    </li>

    <li>
        2 Apple - <div class="divText">Red juicy fruit.</div>
    </li>

</ul>

ul li { color: #ad0c10; margin:0 0 10px;}
ul li div.divText {color: #c81018;}

ul {
    counter-reset: itemCounter;
    list-style:none;
}
li {
    padding-left: 75px;
    counter-increment: itemCounter;
    position:relative;
}
li:before {
    content: counter(itemCounter);
    position: absolute;
    left:0;
    color: purple;
}
li:after {
    content: attr(data-item)  ' - \00a0';
    position: absolute;
    left:15px;
    top:0;
}