伪元素

文章
/
learn / htmlcss
/ 伪元素
返回文章列表

伪元素

learn/htmlcss
#HTML+CSS

伪元素 - ::after

::after 伪元素可用于在元素内容之后插入新内容。

代码示例

HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      .exciting-text::after {
          content: "<- 让人兴兴兴奋！";
          color: green;
      }

      .boring-text::after {
          content: "<- 无聊！";
          color: red;
      }
    </style>
</head>
<body>
    <p class="boring-text">这是些无聊的文字</p>
    <p>这是不无聊也不有趣的文字</p>
    <p class="exciting-text">在 MDN 上做贡献简单又轻松！</p>
</body>
</html>

伪元素 - ::before

::before 伪元素可用于在元素内容之前插入新内容。

代码示例

HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      .exciting-text::before {
          content: "<- 让人兴兴兴奋！";
          color: green;
      }

      .boring-text::before {
          content: "<- 无聊！";
          color: red;
      }
    </style>
</head>
<body>
    <p class="boring-text">这是些无聊的文字</p>
    <p>这是不无聊也不有趣的文字</p>
    <p class="exciting-text">在 MDN 上做贡献简单又轻松！</p>
</body>
</html>