伪元素

最新推荐文章于 2024-08-12 12:31:02 发布

子永

最新推荐文章于 2024-08-12 12:31:02 发布

阅读量144

点赞数

分类专栏： html学习笔记文章标签： html css css3

本文链接：https://blog.csdn.net/Wu123456CS/article/details/107169753

版权

html学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素</title>
    <style>
        /* 
        伪元素，表示页面中一些特殊的并不真实存在的元素 (特殊的位置)
         */
        p{
            color: blue;
        }
        /* 
        第一个字母
         */
         p::first-letter{
             font-size: 40px;
         }

         /* 第一行 */
         p::first-line{
             background-color:yellowgreen;
         }

         /* 选中的内容 */
         p::selection{
             color: red;
         }
         /* ::before 元素的开始
            ::after 元素的结束
                这两个 必须结合content属性来使用 因为正常来说
                之前和之后是没有内容的，那么自然也就没有效果显示出来
          */
        div::before{
            content: '【';
            color: rgb(7, 13, 102);
        }
        div::after{
            content: '】';
            color: rgb(7, 13, 102);
        }
    </style>
</head>
<body>
    <div>这是div 可以用来看before 和after属性的效果</div>
    <p>这里是段落
         <br>莫欺少年穷，终需有日龙穿凤

    </p>
</body>
</html>