伪元素

list之间的分割线

div:after{
  content:"";
  display: block;
  width: 100%;
  height: 1px;
  margin: 0 auto;
  background-color: #e6e6e6;
}

总结：善用after ，当然before也可
也可用下方的not()排除特殊元素

div:not(.y_list>div:nth-child(1)):after

按钮背景类动画

 /* CSS */
      /*1. width 动画样式 */
    .anim_width{
        display: block;
        height: 60px;
        width: 100px;
        padding: 0 10px;
        line-height: 60px;
        position: relative;
        text-decoration: none;
        color:goldenrod;
    }
   
  /*  样式核心*/
    .anim_width:before{
        content:'';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 0;
       

        transition: .3s;
        background-color: pink;
        z-index: -2;
    }

    .anim_width:hover:before{
        width: 100%;
        z-index: -1;
    }
    /*  */

 <!-- HTML -->
<a class="anim_width" href="">社区解决方法</a>

list 列表侧边样式

• 效果

  
  image.png

• 原理：给元素添加：after 就相当于给这个标签添加一个最末尾的孩子，内容通过content设置，可以是字体content:'01',也可以通过背景background添加图片设置，不过此时的content：‘’设为空字符串

• 逻辑
  竖线通过ul加伪元素after得到，每个list旁的圆圈数字通过给li加after得到；
  给ul设置相对定位，他的为元素也添加定位，这个为元素就相对于ul定位了

<ul>
                    <li>
                        <p></p>
                    </li>
                    <li>
                        <  <p></p>
                    </li>
                    <li>
                          <p></p>
                    </li>
 </ul>

//xx.css

.y_contetn>ul{
list-style: none;
position: relative;
}
.y_contetn>ul:after{
content: "";
position: absolute;//相对于ul'定位需要就设置
width: 0.01rem;
background: #fff;
opacity: .3;
top: 0.25rem;
left: 0;bottom: 0.13rem;
height: 5rem;
}


//方法一：添加文字
y_contetn>ul>li{
position:relative
}
y_contetn>ul>li:after{
content: "";
position: absolute;
top: -0.1rem;
bottom: 0.10rem;
left: -0.23rem;
display: block;
width: 0.46rem;
height: 0.46rem;
background-color: transparent;//透明背景
opacity: 1;
font-size: 0.24rem;
color: #fff;
border: 0.01rem solid #fff;
border-radius: 50%;
background:#3b465b;
text-align: center;
line-height: 0.44rem;}

.y_contetn>ul>li:nth-child(1):after{content: "01";}
.y_contetn>ul>li:nth-child(2):after{content: "02";}
y_contetn>ul>li:nth-child(3):after{content: "03";}


// 方法二添加背景图
/* 第二种写法 引入图片*/
.y_contetn>ul>li:after{content: "";position: absolute;top: -0.1rem;bottom: 0.10rem;left: -0.23rem;display: block;width: 0.46rem;height: 0.46rem;background-color: transparent;opacity: 1;}
y_contetn>ul>li:nth-child(1):after{background-image: url(../image_syl_complain/process_03.jpg);background-repeat: no-repeat;background-size: contain;}
.y_contetn>ul>li:nth-child(2):after{background-image: url(../image_syl_complain/process_06.jpg);background-repeat: no-repeat;background-size: contain;}
.y_contetn>ul>li:nth-child(3):after{background-image: url(../image_syl_complain/process_08.jpg);background-repeat: no-repeat;background-size: contain;}