伪类after的使用

.center-tc {
                text-align: center;
                position: relative;
                color:red;
                &:before{
                    content:'';
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background-color: green;
                    position: absolute;
                    top:25px;
                    left: 8px;
                };
                &:after{
                  content:"";
                  width:88%;
                  height: 1px;
                  background:green;
                  position: absolute;
                  top:30px;
                  left: 18px;
                }
            }

上述代码实现的效果如下

 

要注意的是：

1）after生成的内容是放在寄生元素内部的，且在该内部的最后面：

例如html文件：

<div class="box">dasd</div>
<div class="box-2">dasd</div>

对应的css文件：

.box,.box-2{
    width:300px;
    height: 200px;
    background: #ccc;
    display: inline-block;
}
.box{
   &:after{
        content:'打算就看到';
    };  
}
.box-2{
background: orange;
}

则生成的效果如下所示：

可以看到after的内容“打算就看到”就在第一个div的内部。所以可以使用父元素相对位置，after的内容绝对定位的方法来定位元素。

2）after的内容的width：百分比；是继承了父元素的宽度做的百分比；例如一般我们设置子元素的宽度时就是使用的width:100%

 

转载于:https://www.cnblogs.com/xiaozhumaopao/p/5916484.html