如何让按钮:active状态呈现CSS hover动画的最终效果？

首先得给.btn_nav加上position: relative——你的伪元素用了绝对定位，父元素没设相对定位的话，伪元素会相对于页面根元素定位，这就是之前对齐偏差的核心原因。然后直接把:hover和:active的伪元素样式合并，就能实现点击时呈现hover的最终线条效果，同时解决背景着色问题：

.btn_nav {
    color: black;
    position: relative; /* 必须加：让伪元素以按钮为基准定位 */
    background: transparent; /* 去掉默认按钮背景，避免:active时自带的灰色背景干扰 */
    border: none; /* 可选：移除默认按钮边框，和伪元素线条区分开 */
    padding: 8px 16px; /* 可选：给按钮加内边距，布局更舒服 */
    cursor: pointer;
}

.btn_nav::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 2px;
    background-color: #689351;
    transition: all 0.3s ease;
    opacity: 0;
}

/* 同时给hover和active状态应用最终样式 */
.btn_nav:hover::after,
.btn_nav:active::after {
    bottom: -1px;
    opacity: 1;
}

<button class='btn_nav'>button</button>

补充说明 #

• 之前的背景着色问题，大概率是浏览器默认的按钮:active样式（比如灰色背景）导致的，给.btn_nav设置background: transparent就能彻底解决。
• 如果需要点击按钮后持久保留线条效果（比如导航栏的选中态），可以额外加个自定义类配合JS实现：

/* 新增持久化选中样式 */
.btn_nav.active::after {
    bottom: -1px;
    opacity: 1;
}

// 点击切换选中态
document.querySelector('.btn_nav').addEventListener('click', function() {
    this.classList.toggle('active');
});

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