伪元素选择器

最新推荐文章于 2024-02-18 09:25:08 发布

守住⒈份信仰°

最新推荐文章于 2024-02-18 09:25:08 发布

阅读量190

点赞数

分类专栏：前端文章标签： css3

本文链接：https://blog.csdn.net/qq_43648337/article/details/108389243

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文深入讲解了CSS伪元素的使用，包括:first-letter、:first-line、:selection、:before和:after等，演示了如何利用这些伪元素进行文本修饰、添加内容及样式调整。

摘要由CSDN通过智能技术生成

表示页面中一些特殊的并不真实存在的元素（特殊的位置）
伪元素一般使用：：开头
常见伪元素：
1、：：first-letter 表示第一个字母
2、：：first-line 表示第一行
3、：：selection 表示选中的内容
4、：：before 表示元素的起始位置
5、：：after 表示元素的末尾位置
注：before、after伪类必须结合content属性来使用，不然没有效果。通过这两个伪类可以使用CSS添加内容，但用CSS添加的内容无法被选中。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        /* 文字首字母下沉（第一个字母更大） */
        ::first-letter{
            font-size: 20px;
        }
        /* 第一行背景颜色为黄绿色 */
        ::first-line{
            background-color: yellowgreen;
        }
        /* 选中的内容变黄 */
        ::selection{
            background-color: yellow;
        }
       /* 在div中的最前面（即H字母之前）添加abc，并变红 */
        div::before{
            content: 'abc';
            color: red;
        }
        /* 在div中的最后面（即o字母之后）添加def，并变蓝 */
        div::after{
            content: 'def';
            color: blue;
        }
        /* 给span中的文字加特殊符号括起来 */
        span::before{
            content: '「';
        }
        span::after{
            content: '」';
        }
        
    </style>
</head>
<body>
    
    <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
        Dicta debitis deleniti explicabo quae. In ratione minima na
        m temporibus soluta? Quasi voluptatibus aliquam doloribus 
        libero adipisci vel quas magni aliquid consequatur?
    </p>
    <div>Hello</div>
    <span>abcde</span>
</body>

</html>