CSS中选择器的介绍（二）之伪元素选择器

本文链接：https://blog.csdn.net/qq_39746820/article/details/123836941

我们在之前的文章中介绍了一些CSS的选择器，这篇文章我们再介绍一种选择器，伪元素选择器。

在介绍之前，我们先补充一个伪类选择器:fous

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 当文本框获取焦点的时候背景颜色修改为red */
        
        input:focus {
            background-color: red;
        }
    </style>
</head>

<body>
    这是文本框： <input type="text">
</body>

</html>

下面进入正题，介绍伪元素选择器

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 元素的开始 */
        
        h1::before {
            content: "hello";
            background-color: blue;
        }
        /* 元素的结束 */
        
        h1::after {
            content: "world";
            background-color: orange;
        }
        /* 第一个字母 */
        
        h1::first-letter {
            font-size: 50px;
        }
        /* 第一行 */
        
        h1::first-line {
            color: purple;
        }
    </style>
</head>

<body>
    <h1>我是h1标题</h1>
</body>

</html>