修改after样式_理解：Before和：After伪元素

最新推荐文章于 2024-08-13 21:48:51 发布

何钦尧

最新推荐文章于 2024-08-13 21:48:51 发布

阅读量3k

点赞数 1

文章标签：修改after样式

本文链接：https://blog.csdn.net/weixin_33274667/article/details/112606881

版权

本文详细介绍了CSS中的:before和:after伪元素，包括其语法、浏览器支持、用法、CSS样式设置、宽度和高度设定，以及如何添加背景图和背景色。通过示例展示了如何与伪类混合使用，以及如何创建过渡效果，帮助开发者更好地理解和利用这些伪元素来增强网页设计。

摘要由CSDN通过智能技术生成

CSS样式表的主要作用是修饰Web页面上的HTML标记，但有时候，为了实现某个效果而往页面里反复添加某个HTML标记很繁琐，或者是显得多余，或者是由于某种原因而做不到。这就是CSS伪元素(Pseudo-Element)可以发挥作用的地方，所谓‘伪元素’，就是本身不存在的页面元素，HTML代码里并没有这样的元素，但在页面显示时，你却能看到这些本来不存在的元素发挥着作用。

观看演示

之前我们曾简要的介绍过一些关于伪元素(Pseudo-Element)的文章，下面我们要详细的再说一下。

事实上，伪元素在CSS里是一系列的元素，比如:first-line, :first-letter, ::selection, :before 和 :after，但在本文中，我们将只讲解 :before 和 :after 这两个。让我们先了解一下这种技术的基本知识。

伪元素语法

早在CSS1里就已经有了伪元素的概念，但我们今天要说的 :before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before & ::after – 这个样子，用来跟“伪类(pseudo-classes)”区分开，