伪元素

1、"first-line" 伪元素用于向文本的首行设置特殊样式。只能用于块级元素

1、"first-letter" 伪元素用于向文本的首字母设置特殊样式。只能用于块级元素

3、":before" 伪元素可以在元素的内容前面插入新内容。

4、":after" 伪元素可以在元素的内容之后插入新内容。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .div1{
                width:100px;
                height: 30px;
                border: 1px solid black;
                left: 10px; 
                position: relative;
                text-align: center;
            }
            .div2{
                width:200px;
                height: 200px;
                border: 1px solid black;
                top: 30px;
                left: -1px;
                position: absolute;
                text-align: center;
                display: none;
            }
            .div2:after{
                content: '';/*没具体内容（如图片）时，也必须要写此句*/
                width: 100px;
                height: 1px;
                background-color: white;
                position: absolute;
                top: -1px;
                display: none;
            }
            .div1:hover .div2:after{
                display: block;
            }
            .div1:hover  .div2{
                display: block;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            div1
            <div class="div2">
                div2
            </div>
        </div>
    </body>
</html>

效果

div1

div2

posted on 2017-09-26 16:36 XMLYS 阅读(158) 评论(0) 编辑收藏举报