css3基础 ::before ::after 添加元素简单示例

时间：2018-02-11 18:10:07 阅读：306 评论：0 收藏：0 [点我收藏+]

标签：老师 play col w3cschool display win ide color alt

礼悟：
　　公恒学思合行悟，尊师重道存感恩。叶见寻根三返一，江河湖海同一体。
虚怀若谷良心主，愿行无悔给最苦。读书锻炼养身心，诚劝且行且珍惜。

　　 ide：visual studio 2017　　
browser：Chrome
os：win7

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="author" content="https://www.cnblogs.com/jizuiku"/>
    <title></title>
    <style type="text/css">

        div::before {
            /* 添加的内容 默认是inline元素 */
            /* 必须设置content的内容 */           
            content:"博客园";           
            display:block;
            height:100px;
            width:100px;
            background-color:burlywood;
        }

        div::after {
            /* 添加的内容 默认是inline元素 */
            /* 必须设置content的内容 */     
            /* 试一试，内容可以选中吗？ */
            content:"-网页设计";
            
            display:block;
            height:100px;
            width:100px;
            background-color:burlywood;
        }

    </style>
</head>
<body>
    <div>-给最苦</div>
</body>
</html>