对于我的<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%">');
所以问题是，如何使用css3附加<hr width="40%">到每个 <li>特定列表？
jQuery解决方案
刚刚意识到您想在关闭hr元素li之前将其嵌套在里面，是的，它是完全有效的，因此只需使用append()和注意，您不能仅使用CSS来完成此操作，因为您无法使用CSS修改DOM，因此需要使用jQuery或JS
jQuery("ul li").append("<hr />");
CSS解决方案
如果您不需要额外的元素，或者您不需要jQuery解决方案（根据需要）
将hrelement用作element的直接子ul元素不是有效的标记，相反，您可以border-bottom为li与之行为相同的每个元素使用a hr，即使您仍希望使用显式的方式来这样做，例如控制width分隔符的而不更改width的li比你可以做这样的
ul li:after {
content: "";
display: block;
height: 1px;
width: 40%;
margin: 10px;
background: #f00;
}
在这里，仅创建一个虚拟block级别元素，该元素实际上并不存在于DOM中，但是它将满足您的需要。您可以设计元素，就像设置法线的样式一样div。您还可以border在此上使用，但要保持细线水平居中，这是我已经分配的，height: 1px;并且比以前要进行margin间隔。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句