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

    
item one
    
item two
    
item three
    
item four
    
item five

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