当 link 换行时设置伪元素的样式？

Question

我创建了一个 'underline' 动画，它在 link 下使用了一个 ::after 伪元素。这是 link 和伪元素的代码：

Link

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%;
}

当 link 在单行时一切正常，但如果 link 流到下一行，那么它只会填充第一行的底部，如此处所示:

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 元素是内联的（默认），并且当它换行时，任何依赖于其宽度的 pseudo/child 元素在 Chrome 和元素的宽度中获得 0 宽度FF 中第一行的宽度。内联元素无法控制它们自己的 width/height 属性（例如，您不能在不将它们更改为块元素的情况下对它们设置 width:100px ），这也会影响任何依赖于绝对定位的元素width/height.

如果在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 而不是伪元素，您可以通过调用 getBoundingClientRect().width 来调查子元素在 mouseover 之后的实际宽度，在这种情况下，在 chrome 中你会看到 0px，而在 FF 中，父元素落在第一行的部分的宽度。

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

当 link 换行时设置伪元素的样式？

Styling pseudo-elements when a link has wrapped?

css

word-wrap

pseudo-element