добавить круг, окружающий пулю стиля list

Question

Может ли кто-нибудь научить меня, как центрировать эту позицию круга, окружая стиль списка пули. Я сделал несколько, но это не достаточно хорошо

.poe li {
  list-style: none;
 
}
.poe li:before {
  content: "• ";
  color: black;

}
.poe:hover .anime,
.poe:hover ~ .anime {
    color: #fff;
   
	        -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
        transform: scale(0.5);
}
 
.anime {
	margin-left:-23px;
	margin-top:-10px;
	height: 15px;
  width: 15px;
  background-color: transparent;
  border-radius: 50%;
  border:thin solid black;
  display: block;
}

 <ul>
  <li class="poe"><span id="anime" class="anime"></span>1. HOVER ME</li>
  <li class="poe"><span id="anime" class="anime"></span>2. HOVER ME</li>
</ul>

Answer 1

.poe является элементом li, поэтому измените .poe li на li.poe, затем используйте псевдоэлементы

.poe {
  list-style: none;
   position: relative;
   margin-bottom: 14px;
}
.poe:before,
.poe:after{
  content: "";
  position: absolute; 
  width: 4px;
  height: 4px;
  top: 50%;
  margin: -2px 0 0 -2px;/*width/2 and height/2*/
  left: -20px;
  border-radius: 50%;
  border: 1px solid black;
  transition: all .3s ease 
}
.poe:before{
  background-color: black;
}
.poe:after{
  transform: scale(4)
}
.poe:hover {
  cursor: pointer
} 
.poe:hover:after{
  transform: scale(0)
}
 

<ul>
  <li class="poe"><span id="anime" class="anime"></span>1. HOVER ME</li>
  <li class="poe"><span id="anime" class="anime"></span>2. HOVER ME</li>
</ul>

или

.poe {
  list-style: none;
   position: relative
}
.poe:hover {
  cursor: pointer
}
.poe:before,
.poe:after{
  content: "";
  position: absolute; 
  width: 4px;
  height: 4px;
  top: 50%;
  margin: -2px 0 0 -2px;/*width/2 and height/2*/
  left: -20px;
  border-radius: 50%;
  border: 1px solid black;
  transition: all .1s ease 
}
.poe:before{
  background-color: black;
}
 
.poe:hover:after{
  transform: scale(2.2,2.2)
}
 

<ul>
  <li class="poe"><span id="anime" class="anime"></span>1. HOVER ME</li>
  <li class="poe"><span id="anime" class="anime"></span>2. HOVER ME</li>
</ul>

Answer 2

Я сделал несколько изменений в вашем CSS и добавил демо здесь. Примечание. Я удалил некоторые из ваших CSS и добавил несколько стилей, которые обычно добавляю для лучшей отделки. Удалите их, если хотите.

    li.poe{
  list-style: none;
  position:relative;
}
li.poe:before {
  content: "•";
  color: black;
  position:absolute;
  left:-15px;
}
.poe:hover .anime,
.poe:hover ~ .anime {
  color: #fff;
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
}

.anime {
    height: 15px;
  width: 15px;
  background-color: transparent;
  border-radius: 50%;
  border:thin solid black;
  display: block;
  position:absolute;
  left:-21px;
}

Answer 3

Как указано в комментариях .poe li должно быть li.poe

Я на 100% уверен, что вы ищете, но это может помочь:

li.poe {
  list-style: none;
  position: relative;
}
li.poe:before {
  content: "• ";
  color: black;
  position: absolute;
  top: 0px;
  left: -17px;
}
.poe:hover .anime {
  color: #fff;
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
}
 
.anime {
  position: absolute;
  top: 0px;
  left: -23px;
	height: 15px;
  width: 15px;
  border-radius: 50%;
  border:thin solid black;
  display: block;
}

<ul>
  <li class="poe"><span class="anime"></span>1. HOVER ME</li>
  <li class="poe"><span class="anime"></span>2. HOVER ME</li>
</ul>