伪元素实现的链接hover高亮换行时失效问题排查求助

问题现象 #

用伪元素给链接添加下划线动画高亮时，当多个链接因容器宽度限制换行，新行的链接高亮效果异常——下划线会撑满父容器整行宽度，而非仅覆盖链接文本区域。通过开发者工具能看到，换行后的链接元素实际占据了父容器的全部宽度。

代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #container {
            width: 250px;
            border: 1px solid #000;
        }
        a {
            color: #000;
            text-decoration: none;
            position: relative;
        }
        a::before {
            content: "";
            position: absolute;
            display: block;
            width: 100%;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: #000;
            transform: scaleX(0);
            transition: transform 0.5s ease;
        }
        a:hover::before {
            transform: scaleX(1);
        }
    </style>
</head>
<body>
    <div id="container">
        <p>
            <a href="">First Link</a>,
            <a href="">Second Link</a>,
            <a href="">Third Link</a>,
            <a href="">Fourth Link</a>
        </p>
    </div>
</body>
</html>

问题根源 #

<a>标签默认是行内元素（inline），即便设置了position: relative，它的包含块仍是最近的块级父元素（此处为<p>）。伪元素设置width: 100%时，会继承块级父元素的宽度，而非<a>自身文本撑开的宽度。换行后链接实际占据整行空间，导致下划线撑满整行。

解决方法 #

把<a>标签的显示类型改为inline-block，这样<a>会成为行内块元素，宽度由自身文本内容决定，同时保留行内排列特性。此时伪元素的width: 100%会相对于<a>自身宽度，下划线就能精准覆盖链接文本区域：

a {
    color: #000;
    text-decoration: none;
    position: relative;
    display: inline-block; /* 添加该行代码 */
}

若需要保留链接间的紧凑间距，可微调margin或padding避免额外空隙。

内容的提问来源于stack exchange，提问作者theadam