伪元素before和after

作者: 琪33 | 来源:发表于2018-04-25 10:53 被阅读0次

 <style>
        /* 伪 元素：  伪：假的  元素：标签*  （:after :before  css2 不推荐 ）
           标志性符号： 双冒号(::)
           ::before ,::after 通过 css 模拟出来html标签的效果
           注意：必须有content属性才行，
        */
        span::before{
            content:"今天";
            color:red;
            background-color: pink;
            width: 50px;
            height: 50px;
            display: inline-block;
        }
        span::after{
            content:"真好";
            color:green;
        }
        span{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <span>天气</span>
    <!-- 元素 标签 节点 -->
    <!--<span>今天</span><span>天气</span><span>真好</span>-->
</body>