Kann mir jemand beibringen, wie man diese Kreisposition um den Aufzählungslistenstil zentriert? Ich habe einige gemacht, aber es ist nicht gut genug

.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>
1
abizayra 23 Feb. 2020 im 18:09

3 Antworten

Beste Antwort

Ich habe nur wenige Änderungen an Ihrem CSS vorgenommen und hier eine Demo hinzugefügt. Hinweis: Ich habe einige Ihrer CSS entfernt und einige Stile hinzugefügt, die ich normalerweise zur besseren Fertigstellung hinzufüge. Entfernen Sie sie, wenn Sie es wollen.

    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;
}
0
Aravinth Ramesh 23 Feb. 2020 im 16:11

Wie in den Kommentaren angegeben, sollte .poe li li.poe sein

Ich bin mir nicht 100% sicher, wonach Sie suchen, aber das könnte helfen:

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>
0
caramba 23 Feb. 2020 im 15:18

.poe ist das li Element. Ändern Sie also .poe li in li.poe und verwenden Sie dann Pseudoelemente

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

Oder

.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>
1
Gildas.Tambo 23 Feb. 2020 im 15:47