如何在HTML中为链接添加背景条样式？附现有实现代码

你现有代码已经实现了基础的块级按钮式超链接背景效果，但存在无效属性，也可以做体验优化：

• position: center 是非法CSS取值，position 属性仅支持 static/relative/absolute/fixed/sticky 这几个合法值，不存在center选项
• 你写的top: 0%仅在position为非static值时生效，当前场景下属于冗余代码，可以直接删除
• 如果需要让链接组整体居中，不要给a标签本身加定位属性，给父容器设置text-align: center即可
• 可以增加过渡属性，让hover时的背景色切换更顺滑，不会有生硬的跳变感

修正后的块级按钮背景效果代码 #

CSS部分 #

a:link,
a:visited {
    background-color: white;
    color: black;
    border: 2px solid green;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 0 8px; /* 增加少量左右外边距，避免相邻链接贴在一起 */
    font-family: cursive;
    transition: all 0.3s ease; /* 增加状态切换的平滑过渡 */
}

a:hover,
a:active {
    background-color: green;
    color: white;
}

/* 链接组容器，用来实现整组链接居中 */
.link-wrap {
    text-align: center;
    padding: 20px 0;
}

HTML部分 #

<div class="link-wrap">
  <a href="1st_Page.html" target="_blank">1st</a>
  <a href="2nd_Page.html" target="_blank">2nd</a>
  <a href="3rd_Page.html" target="_blank">3rd</a>
</div>

这个代码实现的效果是：默认状态链接为白底绿边框的按钮样式，鼠标悬停/点击激活时会平滑切换为绿底白字的样式，整组链接默认在页面居中显示。

文字底部滑入背景条效果（可选） #

如果你需要的是文字下方的条状高亮、而非整块按钮的背景，可以用背景渐变实现滑入动效，代码如下：

a:link,
a:visited {
    color: black;
    text-decoration: none;
    padding: 2px 6px;
    background-image: linear-gradient(green, green);
    background-size: 0 100%;
    background-repeat: no-repeat;
    background-position: left bottom;
    transition: background-size 0.3s ease;
}
a:hover,
a:active {
    background-size: 100% 100%;
    color: white;
}

这个效果下，默认链接无额外背景，鼠标移入时绿色背景条会从左向右平滑铺满整个链接区域，文字同步变为白色。

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