伪元素选择器

标签（空格分隔）：伪元素

介绍常用的伪元素：
设置第一个首字母的样式：

first-letter

例如：

p:first-letter {
  font-size: 48px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style type="text/css">
        p:first-letter{
            color:red;
            font-size: 30px;
        }


    </style>
</head>
<body>
    <p>woshiyie duandua </p>


</body>
</html>

before

用于在元素的内容前面插入新内容。结合content使用，使用不是很频繁;

p:before {
  content: "*";
  color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style type="text/css">
        p:first-letter{
            color:red;
            font-size: 30px;
        }
        /*结合content使用，在。。。之前添加内容，使用不是很频繁*/
        p:before{
            content:'lll';


        }


    </style>
</head>
<body>
    <p>woshiyie duandua </p>


</body>
</html>

after

使用比较频繁，建议掌握；
用于在元素的内容后面插入新内容。如下是在最后加入：&符号，代码如下


p:after {
  content: "?";
  color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style type="text/css">
        p:first-letter{
            color:red;
            font-size: 30px;
        }
        /*结合content使用，在。。。之前添加内容，使用不是很频繁*/
        p:before{
            content:'lll';
        }
        /*经常使用*/
        p:after{
            content:'&';
            color:red;
            font-size:20px;
        }
    </style>
</head>
<body>
    <p>woshiyie duandua </p>
</body>
</html>