我创建了一个“下划线”动画,该动画在链接下方使用:: 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-spacedisplayposition配置,但无济于事。

这是行为的一个示例:

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,它可以工作,但显然将不再包装。

07-24 09:48
查看更多