我試圖制作一個類別列表，其中選中的選項帶有下劃線，我嘗試使用偽元素::after來實現(xiàn)這一點，但是下劃線沒有顯示出來。

為了顯示一個::after元素，還需要在代碼中添加什么嗎？

預期結(jié)果:

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

<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>

您正在嘗試設(shè)計一個& lt選項& gt標簽和這個問題中所說的

只有幾個樣式屬性可以應用于& lt選項& gt元素。 這是因為這種類型的元素是& quot替換的元素& quot。它們依賴于操作系統(tǒng)，不是HTML/瀏覽器的一部分。它不能通過CSS樣式化。

有替代的插件/庫看起來像一個& lt選擇& gt但實際上是由可以進行樣式化的常規(guī)HTML元素組成的。

如果你想做到這一點，你可以有一個自定義& lt選擇& gt