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。内联元素无法控制它们自己的宽度/高度属性（例如，您不能在它们上设置 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，但它会起作用，但显然不会再换行。

在链接包装时设置伪元素的样式？

1 个答案: