如何修复CSS链接滑动下划线悬停效果粗细不均问题

问题成因 #

粗细不均的核心原因有三个：

• 未清除浏览器默认的text-decoration下划线，自定义背景下划线和默认下划线部分叠加，视觉上出现粗细差异
• 使用百分比做垂直背景定位，行内链接在不同行高、不同字重、不同文本内容（含/不含降部字母）下，会出现亚像素级的定位偏移，部分位置下划线和文字笔画重叠
• em单位换算出的下划线高度如果是小数值，浏览器自动取整时会出现不同链接渲染高度不一致的问题

修复方案 #

直接替换原有CSS代码即可，完全保留原方案的多行文本兼容特性：

article a, .widget a {
    color: #a90000;
    font-weight: bold;
    /* 清除浏览器默认下划线，避免和自定义下划线叠加 */
    text-decoration: none;
    background-image: linear-gradient(#000000, #000000);
    /* 下划线初始状态宽度为0，高度固定为2px避免小数像素渲染偏差 */
    background-size: 0% 2px;
    /* 固定背景定位基准，消除百分比定位的亚像素偏移 */
    background-position: 100% 100%;
    background-origin: padding-box;
    background-repeat: no-repeat;
    /* 留出1px内边距，避免下划线紧贴文字笔画 */
    padding-bottom: 1px;
    transition: background-size 0.2s ease-in-out;
}

article a:hover,
.widget a:hover,
article a:focus,
article a:active,
.widget a:focus,
.widget a:active {
    background-size: 100% 2px;
    background-position-x: 0%;
}

如果需要保留下划线随字号自适应的特性，可以把代码里的2px替换为0.1em，同时给选择器加上-webkit-font-smoothing: antialiased;统一文字渲染规则，进一步减少视觉上的粗细差异。

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