css - 链接已换行时设置伪元素的样式？

Question

我创建了一个“下划线”动画，它在链接下方使用了一个::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/

Answer 1

这不能用 CSS 来完成。 (我已经使用 JS 为不超过 2 行的链接实现了它:https://jsfiddle.net/6zm8L9jq/1/ - 您可以调整框架的大小以查看它的工作情况)

在我的 Chrome (39.0.2171.95) 中，a 下的下划线根本不起作用，而在 FF 中，它显示如上面的屏幕截图所示。这主要是因为您的 a 元素是内联的(默认)，并且当它换行时，任何依赖于其宽度的伪/子元素在 Chrome 中获得 0 宽度，并且该元素的FF 中第一行的宽度。内联元素无法控制它们自己的宽度/高度属性(例如，您不能在不将它们更改为 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 之后调查子元素的实际宽度，方法是在 child 上调用 getBoundingClientRect().width，在这种情况下，在 chrome 中你会看到 0px，而在 FF 中，父元素部分的宽度落在第一行。

您可以将 a 元素更改为 display: inline-block 并且它会起作用，但它显然不再换行。