如何确保粗下划线在换行时有效？

Question

我正在使用以下代码为我的超链接添加更粗/更有样式的下划线装饰。

a { text-decoration: none; position: relative;}

a:hover { color: #c0632e; }

a::after { content: ""; position: absolute; width: 100%; height: 30%;
        bottom: 0; left: 0; background-color: #2EB0C0;
        opacity: 0.15; z-index: -1; }
    
a:hover::after { background-color: #c0632e; }

然而，只有当我将其转换为类并将其作为添加到每个链接中时，它才能正常工作。如果我尝试全局实现，当超链接中间有换行时，它就不起作用。当没有换行时，它能正常工作，但有换行时就不行。

有没有办法修复它，以便全局使用，而不必为每个超链接定义？

Answer 1

最近我也遇到了同样的问题。我建议你使用border bottom而不是::after。 试试这个：

a {
    border-bottom: 1rem solid;
}

你也可以使用px来指定大小，而不是rem。如果边框颜色没有显示出来，不要忘记指定边框颜色

border-color: black;