CSS菜单下划线：hover效果已实现，如何设置active状态同位置同款下划线？

你只需要给处于active状态的菜单元素添加和hover一致的样式即可，因为基础下划线样式已经通过::after伪元素定义好了，仅需在active状态下把宽度设为100%：

.cool-link::after {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background: #f83269;
    transition: width .3s;
    margin-top: 18px;
}

/* 同时作用于hover和active状态，避免重复代码 */
.cool-link:hover::after,
.cool-link.active::after {
    width: 100%;
}

如果你的active状态是指元素被点击时的瞬时状态（而非通过类标记的选中状态），可以把.cool-link.active换成:active伪类：

.cool-link:hover::after,
.cool-link:active::after {
    width: 100%;
}

这样两种状态下的下划线位置、样式完全一致，还能保留原有的过渡动画效果。

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