How do I place the red dot before the selected item using CSS?

Question

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.

Is

Answer 1

Hi look at my example : 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
}