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

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

Answer 2

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
}