html 写css的伪类样式,伪类 样式问题

Document

*{

margin: 0;

padding: 0;

}

ul{

list-style: none;

margin: 100px;

}

.scrollList >li{

position: relative;

height: 60px;

line-height: 60px;

}

.scrollList >li::before {

content : '';

width: 12px;

height: 12px;

border: 1px solid orange;

border-radius: 50%;

color: #666;

position: absolute;

top: 50%;

transform: translateY(-50%);

left:-20px;

z-index: 999;

box-sizing: border-box;

}

.scrollList >li.active::before{

background-clip:content-box;

padding:2px;

background-color:orange;

}

.scrollList >li::after{

content: '';

height: 48px;

width: 2px;

position: absolute;

left: -15px;

top: 36px;

background: orange;

}

• 1
• 2
• 3
• 4

var oLi = document.querySelectorAll(".scrollList li");

for(var i = 0;i

oLi[i].onclick = function(){

this.classList.add("active");

}

}