前端的学习之路：初级CSS---伪元素

最新推荐文章于 2021-02-20 20:20:38 发布

new-SkyWaller

最新推荐文章于 2021-02-20 20:20:38 发布

阅读量86

点赞数

分类专栏：初级CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_44647555/article/details/113556030

版权

初级CSS 专栏收录该内容

75 篇文章 0 订阅

订阅专栏

伪元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素</title>
    <!-- <link rel="stylesheet" href="../chujicss/css/11.15.09.css"> -->
    <style>
        p {
            font-size: 20px;
        }

        /* 
    伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
       伪元素使用：：开头

       ::first-letter 表示第一个字母
       ::first-line 表示第一行
       ::selection 表示选中的内容（鼠标选中）
        ::before 元素的开始
        ::after 元素的最后
            -before和after必须结合content属性来使用

       */
        p::first-letter {
            font-size: 50px;
        }

        p::first-line {
            background-color: orange;
        }

        p::selection {
            background-color: royalblue;
        }

        div::before {
            content: 'abc';
            color: blue;
        }

        div::after {
            content: 'haha';
            color: blueviolet;
        }
    </style>
</head>

<body>
    <div>hello li jian bin</div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim reiciendis impedit repudiandae fugiat inventore,
        suscipit ab reprehenderit magni mollitia architecto dolorum necessitatibus non quasi nisi quas optio quisquam
        incidunt velit!</p>
</body>

</html>

运行结果为：
在这里插入图片描述

new-SkyWaller

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端的学习之路：初级CSS---伪元素

伪元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>伪元素</title> <!-- <link rel="stylesheet" href="
复制链接

扫一扫