★文章内容学习来源：拉勾教育大前端就业集训营

四、 伪元素选择器

1.新增伪元素

选择器 介绍
E::before 在 E 元素内部的前面插入一个元素
E::after 在 E 元素内部的后面插入一个元素
E::first-letter 选择到了 E 容器内的第一个字母
E::first-line 选择到了 E 容器内的第一行文本

2. h5 写法和传统写法区别

  • 单冒号 E:before
  • 双冒号 E::before
  • 浏览器对以上写法都能识别，双冒号是 h5 的语法规范。

3. 伪元素的注意事项

  • 伪元素只能给双标签添加，不能给单标签添加
  • 伪元素的冒号前不能有空格，如 E ::before 这个写法是错误的
  • 伪元素里面必须写上属性 content:" "; （因为新创建的元素里必须有点内容才能创建成功，否则看不到，content引号中可以为空）
  • before 和 after 创建一个元素，但是属于行内元素。（其宽度和高度都是被内容撑开的）
  • 因为在 DOM 里面看不见刚才创建的元素，所以我们称为伪元素。

4.举例

4.1E::before

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> 4.1举例E::before</title>
  <style> *{
     margin: 0; padding: 0; } .box {
     width: 400px; padding: 10px; border: 1px solid #000; } .box p {
     width: 100px; height: 50px; margin-bottom: 10px; background-color: skyblue; } /* 给box盒子内部添加伪元素 */ .box::before {
     content: "1"; display: block; height: 50px; background-color: pink; } </style>
</head>
<body>
  <div class="box">
    <p class="ps">这是一个段落内容</p>
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>
</html>

4.2 E::after

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> 4.2举例E::after</title>
  <style> *{
     margin: 0; padding: 0; } .box {
     width: 400px; padding: 10px; border: 1px solid #000; } .box p {
     width: 100px; height: 50px; margin-bottom: 10px; background-color: skyblue; } /* 给box盒子内部添加伪元素 */ .box::after {
     content: "2"; display: block; height: 50px; background-color: pink; } </style>
</head>
<body>
  <div class="box">
    <p class="ps">这是一个段落内容</p>
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>
</html>

4.3E::first-letter

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> 4.3举例E::first-letter</title>
  <style> *{
     margin: 0; padding: 0; } .box {
     width: 400px; padding: 10px; border: 1px solid #000; } .box p {
     width: 100px; height: 50px; margin-bottom: 10px; background-color: skyblue; } /* 给box盒子内部添加伪元素 */ .ps::first-letter {
     color: red; } </style>
</head>
<body>
  <div class="box">
    <p class="ps">这是一个段落内容</p>
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>
</html>

4.4E::first-line

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> 4.4举例E::first-line</title>
  <style> *{
     margin: 0; padding: 0; } .box {
     width: 400px; padding: 10px; border: 1px solid #000; } .box p {
     width: 100px; height: 50px; margin-bottom: 10px; background-color: skyblue; } /* 给box盒子内部添加伪元素 */ .ps::first-line {
     color: red; } </style>
</head>
<body>
  <div class="box">
    <p class="ps">这是一个段落内容</p>
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>
</html>

下篇继续：【38】CSS3（1）—— 新增选择器⑤属性选择器