伪元素::after不显示问题：选中分类选项下划线实现失败

我尝试给选中的分类选项添加下划线效果，用伪元素::after实现，但下划线并未显示。预期效果为选中的选项下方出现一条黑色下划线。

当前使用的代码如下：

CSS代码 #

.on::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    border-bottom: 1px solid #000;
    opacity: 1;
}

HTML代码 #

<div class="filter-mobile">
    <span>I'm Looking For:</span>
        <select>
            <option value="1" class="button on">All</option>
            <option value="1" class="button">Category 1</option>
            <option value="2" class="button">Category 2</option>
            <option value="3" class="button">Category 3</option>
            <option value="4" class="button">Category 4</option>
            <option value="5" class="button">Category 5</option>
        </select>
    </div>

几乎所有主流浏览器都不支持给<option>元素添加伪元素（包括::after/::before）。这是因为浏览器对原生表单控件的渲染有特殊限制，很多CSS特性无法在<option>上生效。

方法1：转移伪元素到父元素（适配原生select） #

既然<option>无法使用伪元素，我们可以把下划线效果转移到<select>的父元素上，通过JS监听选中状态来切换样式：

步骤1：修改CSS #

/* 给父元素设置相对定位，让伪元素能正确定位 */
.filter-mobile {
    position: relative;
    display: inline-block;
}
/* 选中状态的下划线样式 */
.filter-mobile.has-active::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    border-bottom: 1px solid #000;
}

步骤2：添加JS监听选中事件 #

const select = document.querySelector('.filter-mobile select');
const parent = document.querySelector('.filter-mobile');

// 初始加载时设置默认状态
if (select.options[select.selectedIndex].classList.contains('on')) {
    parent.classList.add('has-active');
}

// 监听选择变化，切换状态类
select.addEventListener('change', function() {
    const isActive = this.options[this.selectedIndex].classList.contains('on');
    parent.classList.toggle('has-active', isActive);
});

步骤3：HTML保持不变 #

默认选中项的on类保留，用于初始状态判断。

方法2：自定义下拉组件（完全自定义样式） #

如果需要更灵活的样式控制，建议放弃原生<select>，用HTML+CSS+JS模拟下拉菜单，这样可以自由使用伪元素：

示例代码 #

HTML

<div class="filter-mobile">
    <span>I'm Looking For:</span>
    <div class="custom-select">
        <div class="select-header">All</div>
        <div class="select-list">
            <div class="select-item active">All</div>
            <div class="select-item">Category 1</div>
            <div class="select-item">Category 2</div>
            <div class="select-item">Category 3</div>
            <div class="select-item">Category 4</div>
            <div class="select-item">Category 5</div>
        </div>
    </div>
</div>

CSS

.custom-select {
    position: relative;
    display: inline-block;
    margin-left: 8px;
}
.select-header {
    padding: 4px 12px;
    border: 1px solid #ccc;
    cursor: pointer;
}
.select-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #ccc;
    background: #fff;
}
.custom-select.open .select-list {
    display: block;
}
.select-item {
    padding: 4px 12px;
    cursor: pointer;
}
.select-item.active::after {
    content: "";
    display: block;
    margin-top: 2px;
    border-bottom: 1px solid #000;
}

JS

const header = document.querySelector('.select-header');
const list = document.querySelector('.select-list');
const items = document.querySelectorAll('.select-item');

// 切换下拉菜单显示/隐藏
header.addEventListener('click', () => {
    document.querySelector('.custom-select').classList.toggle('open');
});

// 点击选项切换选中状态
items.forEach(item => {
    item.addEventListener('click', function() {
        items.forEach(i => i.classList.remove('active'));
        this.classList.add('active');
        header.textContent = this.textContent;
        document.querySelector('.custom-select').classList.remove('open');
    });
});

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