如何使用CSS将红点放在所选项目之前？ [英] How do I place the red dot before the selected item using CSS?

问题描述

我有一个带以下选项的下拉列表：

I have a dropdown with the following options:

当前选中的项目在红。并且在当前选择之前放置了一个红点。

The currently selected item is highlighted in red. And there is a Red Dot placed before the current selection.

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

Is there any way to get the red circle using pure CSS? like with the ::before selector?

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

The code for the dropdown list item is shown below:

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

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

I toggle the anchor tag with active class to indicate red color.

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

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

因此，剩下的只是显示红色圆圈!!!

So, all that remains is to show the red circle !!! It is not straight-forward as it seems because:

1. 红色圆圈大于列表项的光盘。
>

2. 红色圆圈居中，而不是固定在底部。

1. The red circle is bigger than the disc of a list-item.
2. The red circle is centered, and not anchored to the bottom.

推荐答案

是的，您可以在此找到一个jsbin示例 https://jsbin.com/ caqegez / edit？html，css，output

Yes you can here is a jsbin example 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;
}

这篇关于如何使用CSS将红点放在所选项目之前？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！