如何使用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>

我用活动类切换锚标记以指示红色。

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

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

所以剩下的就是展示红圈！这似乎不是直截了当的，因为：

1. 红色圆圈大于列表项的光盘。
2. 红色圆圈居中，而不是固定在底部。

Answer 1

是的，你可以在这里找到一个jsbin示例https://jsbin.com/caqegez/edit?html,css,output

HTML

<ul class="myList">
    <li class="selected">item one</li>
    <li>item two</li>
    <li>item three</li>
    <li>item four</li>
    <li>item five</li>
</ul>

CSS

.myList {
  list-style: none;
  background-color: white;
}

.myList > li {
  text-transform: capitalize;
  font-size: 1.5em;
  font-family: sans-serif;
  padding: 1em;
  color: grey;
}

.myList > li.selected {
  color: red;
}

.myList > li:before {
  display: inline-block;
   content: '';
   height: 0.75rem;
   width: 0.75rem;
   margin-right: 1em;
}

.myList > li.selected:before {
  -webkit-border-radius: 1em;
  border-radius: 1em;
  background-color: red;
}

Answer 2

嗨，看看我的例子：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
}