html自动边界法,html – 带有非边界伪元素的边界元素

伪元素确实没有任何边框,这意味着设置border-bottom:0什么都不做;但是,因为它们是

part of the originating li elements,所以它们在li元素框内呈现,因此li边框扩展到伪元素.

解决此问题的一个简单方法是将边框应用于子元素而不是li元素.这样,伪元素与有边框一起存在.

如果您还需要最后一个项目也有边框,您可以将其文本包装在span元素中并将边框应用于li> a,li>跨度:

…但如果您更喜欢在纯CSS中执行此操作而不使用无关标记,则需要执行此操作

>将伪元素更改为:after伪元素后,

>将伪元素应用于除最后一个li(li:not(:last-child))之外的所有元素,而不是除了第一个(li li)之外的所有li元素,并且

>将边框应用于元素以及最后一个元素.

请记住,使用:last-child将使您的IE8兼容性降低;如果这是一个优先事项,那么你将不得不使用li li的span元素:如上所述.

ul.horizontal-list > li:not(:last-child):after {

content: ">";

padding: 0 3px;

}

ul.horizontal-list > li > a, ul.horizontal-list > li:last-child {

text-decoration: none;

border-bottom: 1px solid #000;

}

ul.horizontal-list > li:not(:last-child):after {

content: " > ";

}

(从技术上讲,您不需要尾随空格,因为每个< / li>结束标记之后的换行符为此目的履行了空白角色,但为了保持一致性,您可以将其包括在内,它通常会在collapse中出现.)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值