css - 如何使用 CSS 将红点放在所选元素之前？

Question

我有一个包含以下选项的下拉菜单:

当前选择的元素以红色突出显示。并且在当前选择之前放置了一个红点。

有什么方法可以使用纯CSS来获得红色圆圈吗？喜欢::before 选择器吗？

下拉列表项的代码如下所示:

<li key={option.value}>
    <a
        className={
            this.state.value === option.value
                ? 'category-link active'
                : 'category-link'
        }
        href="#!"
        onClick={() =>
            this.handleCategoryChange(option.value)
        }
    >
        {option.label}
    </a>
</li>

我将 anchor 标记切换为事件类以指示红色。

.category-link {
    color: #6e6e6e;
    font-size: 1em;
    display: inline-block;

    &.active {
        font-weight: bold;
        color: #db2a30;
    }
}

所以，剩下的就是显示红色圆圈了!!!它并不像看起来那样直截了当，因为:

1. 红色圆圈比列表项的圆盘大。
2. 红色圆圈居中，没有固定在底部。

Answer 1

你好，看看我的例子:https://codepen.io/TokaLazy/pen/JpWEEY

.category-link.active {
    color: red;
    position: relative;
}

.category-link.active::before {
    content: '';
    display: block;
    height: .65em;
    width: .65em;
    background: currentColor;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: -.65em; // size of bullet 
    transform: translateY(-50%); // vertical alignment
}