伪元素

最新推荐文章于 2025-05-06 09:43:14 发布

weixin_30907523

最新推荐文章于 2025-05-06 09:43:14 发布

阅读量60

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xmlys/p/7597521.html

本文介绍并演示了如何使用CSS伪元素:before和:after来增强网页元素的表现力，包括向元素前后插入内容及响应式显示效果。

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>