伪类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%

 

posted @ 2016-09-28 15:17  小猪冒泡  阅读(633)  评论(0编辑  收藏  举报