我正在尝试创建一个CSS转换,其中border-bottom of a href元素在:hover上扩展到链接的宽度。
我能找到的是一个CSS解决方案,其中background width是动画的:。
但这不是我想要的,因为单击导航选项卡后,我想离开边框。因此,我必须直接动画边框,而不是背景。
<!-- assume the border-bottom is only applied to an active=clicked navigation tab -->
<h1 style="border-bottom: 3px solid green;">CS
我更喜欢CSS边框模型,我想很多人也是这样做的:
*, *:before, *:after {
box-sizing: border-box;
}
然而,警告我:
The universal selector (*) is known to be slow.
这里真的是这样吗?使用边框模型可能是当今最常见的,如果浏览器没有对其进行优化,我会感到惊讶。但也许我错了?