添加圆圈，用圆圈弹出llist样式的子弹

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

我在这里对你的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 2

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

正如注释中所述，.poe li应该是li.poe

我百分之百肯定你想要什么，但这可能会有帮助：

​

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>

​