zoukankan      html  css  js  c++  java
  • 伪类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:百分比;是继承了父元素的宽度做的百分比;例如一般我们设置子元素的宽度时就是使用的100%

  • 相关阅读:
    BFS模板 + 力扣例题
    和小吴日常3
    和小吴日常2
    Cocos Creator 学习记录
    js浏览器事件循环机制
    vue+uniapp 项目中一些常用知识
    JSP第一次作业
    Test
    InnoDB存储引擎
    MySQL存储引擎
  • 原文地址:https://www.cnblogs.com/xiaozhumaopao/p/5916484.html
Copyright © 2011-2022 走看看