CSS3新增伪元素选择器基本使用

听海边涛声

于 2024-08-27 19:49:25 发布

阅读量201

点赞数 9

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/panghuangang/article/details/141604099

版权

说明

伪元素选择器可以帮我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML解构。

::before：创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。
::after：创建一个伪元素，作为所选元素的最后一个子元素。它通常用于为具有 content 属性的元素添加修饰内容。

语法：

::before {
  content: /* 值 */;
  /* 属性 */
}

::after {
  content: /* 值 */;
  /* 其他属性 */
}

备注： Selectors 第 3 版引入了双冒号标记法 ::before，以将伪类和伪元素区别开。浏览器也接受由 CSS2 引入的 :before 写法。

备注：CSS 引入 ::after 表示法（两个冒号）是用来区分伪类和伪元素的。同时为了向后兼容，浏览器也支持较早引入的 :after。

注意：

before 和 after 通过CSS的方式创建一个元素，但是属于行内元素。
新创建的这个元素在文档树中是找不到的，所以称其为伪元素。
语法：element::before{}、element::after{}。
before 和 after 必须有 content 属性。
before在父元素内容的前面创建元素，after在父元素内容的后面插入元素。
伪元素选择器和标签选择器一样，权重为1。

示例

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 600px;
      height: 200px;
      background-color: pink;
    }

    div::before {
      /* 这个content是必须要写的 */
      content: '前面插入的内容';
      color: blue;
      font-size: 20px;
    }

    div::after {
      content: '后面插入的内容';
      color: green;
      font-size: 30px;
    }
  </style>
</head>

<body>
  <div> 这是div </div>
</body>

</html>