我创建了一个“下划线”动画,该动画在链接下方使用:: after伪元素。这是链接和伪元素的代码:
链接
a {
position: relative;
}
::后
a:after {
content: '';
display: inline;
position: absolute;
height: 2px;
width: 0%;
background-color: #ce3f4f;
left: 0%;
bottom: 0px;
transition: all 0.2s ease;
}
a:hover::after {
width: 100%;
}
当链接位于单行上时,这一切都很好,但是如果链接流到下一行,则它仅填充第一行的底部,如下所示:
http://i.stack.imgur.com/7SX7o.jpg
如果我检查该元素,则问题似乎无法解决,因为浏览器(在本例中为Firefox)未选择包装元素的整体:
http://i.stack.imgur.com/342GH.jpg
有没有一种方法可以完全使用CSS解决此问题,还是浏览器呈现对象的方式有问题?我玩过很多
white-space
,display
和position
配置,但无济于事。这是行为的一个示例:
https://jsfiddle.net/57Lmkyf4/
最佳答案
CSS无法做到这一点。 (我已经使用JS实现了它的链接,该链接只覆盖了不超过2行:https://jsfiddle.net/6zm8L9jq/1/-您可以调整框架的大小以在工作时看到它)
在我的Chrome浏览器(39.0.2171.95)中,环绕式a
下的下划线完全不起作用,而在FF中,下划线则如上图所示。主要是因为您的a
元素是内联的(默认值),并且当它包装时,任何依赖于其宽度的伪/子元素在Chrome中都会获得0
宽度,而元素的宽度将在FF中获得第一行。内联元素无法控制其自身的width / height属性(例如,在不将其更改为block元素的情况下,无法在其上设置 width:100px
),这也会影响任何依赖于它们的宽度的绝对定位元素/高度。
如果在FF和Chrome中的伪元素上调用window.getComputedStyle
方法,例如:
var a = document.querySelector('a');
a.onmouseover = function(){
setTimeout(function(){
var width = window.getComputedStyle(a,':after').getPropertyValue('width');
console.log(width);
},300); //timeout so that animation to 100% width is completed
}
...在Chrome中,您将看到
0px
,而在FF中,您将看到100%
-两者都不会覆盖父级的实际100%。如果在span
中添加了子元素(例如a
)而不是伪元素,则可以通过在子元素上调用mouseover
来调查getBoundingClientRect().width
之后子元素的实际宽度,在这种情况下,再次使用chrome您会看到0px
,并且在FF中,父元素的一部分的宽度落在第一行上。您可以将
a
元素更改为display: inline-block
,它可以工作,但显然将不再包装。