html - 将水平线附加到每个 <li>

Question

对于我的 <ul>列表，我想添加一个 <hr>在列表的每个元素之后。结果应呈现如下:

<ul class="mylist">
    <li>
        moooo!
        <hr width="40%">
    </li>
    <li>
        maaaaa!
        <hr width="40%">
    </li>
    ...
</ul>

添加<hr>是不好的风格每个 <li>所以我想只使用 css 来折射它。我不能使用:

.mylist > li: after{
    content: "<hr>"
}

因为内容会转义字符。

我也不想使用 jQuery:

$('.mylist').find('li').append('<hr width="40%">');

所以问题是，我如何附加 <hr width="40%"> 每个 <li>使用 css3 的某个列表？

Answer 1

jQuery 解决方案

刚刚意识到你想在关闭它之前将 hr 元素嵌套在 li 中，是的，它完全有效，所以只需使用 append()，请注意，您不能仅使用 CSS 执行此操作，因为您不能使用 CSS 修改 DOM，您需要使用 jQuery 或 JS

jQuery("ul li").append("<hr />");

Demo

---

CSS 解决方案

如果你不需要额外的元素，或者你不想要一个 jQuery 解决方案(如你所愿)

使用 hr 元素作为 ul 元素的直接子元素不是有效的标记，相反，您可以使用 border-bottom每个 li 的行为都与 hr 相同，如果你想要一个明确的方法，比如控制分隔符的 width在不改变 li 的 width 的情况下，你可以这样做

Demo

ul li:after {
    content: "";
    display: block;
    height: 1px;
    width: 40%;
    margin: 10px;
    background: #f00;
}

在这里，我只是创建了一个虚拟的 block 级元素，它实际上并不存在于 DOM 中，但它只会执行您需要的操作。您可以只设计元素，就像设置普通 div 样式一样。您也可以在此使用 border 但为了保持细线水平居中，我分配了 height: 1px; 而不是使用 margin腾出空间。