如何复刻指定主题中Read More按钮的下划线动画效果？

你当前的代码实现的是下划线从左到右滑入的效果，但目标网站的按钮下划线是从中间向两边展开的动画，调整CSS如下即可实现：

.border-button {
  font-family: "Montserrat";
  display: inline-block;
  text-decoration: none;
  position: relative;
  padding: 12px 8px;
  color: #000;
  overflow: hidden;
}

.border-button::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background-color: #000;
  transform: translateX(-50%);
  transition: width 0.4s ease-out;
}

.border-button:hover::before {
  width: 100%;
}

a:hover {
  color: #000;
}

关键修改说明： #

• 伪元素初始宽度设为0，通过left: 50%和transform: translateX(-50%)定位在按钮底部中心
• 过渡属性改为width，hover时宽度从0扩展到100%，实现从中间向两边展开的动画
• 移除伪元素中多余的color属性（伪元素是背景线条，无需设置文字颜色）

内容的提问来源于stack exchange，提问作者Elia d'Albenzio