父元素激活时保持CSS伪元素显示的轻量实现方案

不需要替换伪元素方案，只需要极小改动就能实现需求，完全复用现有代码逻辑，不需要新增额外JS。

实现逻辑 #

当前橙色下划线只在:hover状态下展开到100%宽度，鼠标移开就会收回。点击按钮时已经在同步做两个操作：给按钮本身切换increase类、切换下拉容器的显隐状态，只需要给带increase类的按钮也加上伪元素宽度100%的样式，就能让下拉展开时下划线保持常亮。

具体改动 #

只需要修改一处CSS即可，把原来的hover规则追加激活类的选择器：

/* 替换原有 .dropdown-btn:hover::after 样式块 */
.dropdown-btn:hover::after,
.dropdown-btn.increase::after {
    width: 100%;
}

现有JS逻辑不需要做任何调整，点击按钮切换increase类的操作已经和下拉容器的显隐完全同步，自动实现以下效果：

• 鼠标hover按钮时，下划线平滑展开
• 点击按钮展开下拉后，即使鼠标移开按钮，下划线也会保持展开状态
• 再次点击按钮收起下拉时，increase类被移除，下划线会平滑收回
• 原有过渡动画效果完全保留，没有任何体验断层

额外优化建议 #

当前写的.dropdown-btn样式里重复声明了两次display属性（一次flex一次block），属于冗余代码，可以删掉其中一个，根据实际需要的布局保留对应值即可，不影响本次下划线功能的实现。

其他可选方案对比 #

如果不想用类名绑定的方式，也可以尝试用:focus-within伪类实现，但这种方案稳定性更差：当用户点击下拉容器外的区域、或者焦点转移到其他元素时，下划线会意外收回，不如类名绑定的方案和点击状态完全同步，更适合交互明确的点击式下拉菜单。

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