Css 当链接已包装时设置伪元素的样式？

我创建了一个“下划线”动画，在链接下面使用：：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%;
}

当链接位于一条线上时，这一切都可以正常工作，但是如果链接流到下一条线上，那么它只会填充第一条线的底部，如下图所示：

如果我检查元素，那么问题似乎无法解决，因为浏览器（在本例中为Firefox）没有选择整个包装元素：

有没有一种方法可以完全用CSS来解决这个问题，还是浏览器呈现对象的方式有问题？我使用了很多

空白

、

显示

和

位置

配置，但都没有用

下面是一个行为示例：

---

这不能用CSS来完成。（我使用JS实现了不超过2行的链接：-您可以调整框架的大小以在工作时看到它）

在my Chrome（39.0.2171.95）中，包装

a

下的下划线根本不起作用，而在FF中，它的显示方式与上面的屏幕截图类似。这主要是因为

a

元素是内联的（默认），当它换行时，依赖于其宽度的任何伪/子元素在Chrome中获得

0

宽度，并且元素的宽度在FF中的第一行。内联元素无法控制其自身的宽度/高度属性（例如，如果不将其更改为块元素，则无法在其上设置

width:100px

），这也会影响任何依赖于它们的绝对位置元素的宽度/高度

如果对FF和Chrome中的伪元素调用

窗口.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%。如果将子元素（例如a

span

）添加到

a

而不是伪元素，则可以在

mouseover

之后，通过在子元素上调用

getBoundingClientRect（）.width

来调查子元素的实际宽度，在这种情况下，在chrome中，您将再次看到

0px

，在FF中，父元素落在第一行的部分的宽度

---

您可以将

a

元素更改为

display:inline block

，它可以工作，但显然不再包装。

您可以提供一个JSFIDLE吗？当然，这里是：我认为伪元素不能在两行中工作。它们只是矩形。您很可能需要应用

空白：nowrap

为你的

a

防止这个bug（并保持链接简短）。嗯，这真的很有趣-我很有信心没有办法解决它，但我很高兴能深入研究一下你所说的内容；看看浏览器是如何做到这一点以及为什么做到这一点是很有趣的。添加了一个JS解决方案，如果你想包装，你可以查看答案中的链接。不过，对于超过两行的链接来说，这并不适用。太棒了，谢谢@Sidd-我回家后会试试的。