怎么使用css伪元素before和after

本文主要讲解“如何前后使用css伪元素”。本文的解释简单明了，易学易懂。现在，请跟随边肖的思路，一起学习学习“如何使用css前后伪元素”！

级联样式表的主要目的是给HTML元素添加样式。但是，在某些情况下，没有必要或不可能在文档中添加额外的元素。事实上，CSS中有一个特性允许我们在不干扰文档本身的情况下添加额外的元素，这就是所谓的“伪元素”。

你一定听说过这个词，尤其是当你一直在学习我们的教程的时候。点击这里浏览原作者的其他文章。

事实上，一些CSS家族成员(CSS选择器)被归类为伪元素，如：首行，3360首字母，3360选择，前，后。然而，就这篇文章而言，我们将把讨论范围限制在：之前和：之后。因此，本文中的“伪元素”将具体指这两个伪元素(前：和后：)，我们将从基础上研究这个独特的主题。

关于语法和浏览器支持

伪元素其实在CSS1中是存在的，但是我们现在讨论的：before和： before都是在CSS2.1中发布的，一开始伪元素的语法是“:”(一个冒号)。随着web的发展，CSS3中修改后的伪元素使用“:3360”(两个冒号)，即：before和：aftermdash区分伪元素和伪类(如：hover、active等。)

但是，无论您使用单冒号还是双冒号，浏览器都能够识别它们。由于IE8只支持单冒号格式，为了安全起见，如果想要更广泛的浏览器兼容性，请使用单冒号格式。

它是做什么的

简而言之，伪元素将在内容元素之前和之后插入额外的元素，因此当我们添加它们时，通过使用以下符号，它们在技术上是相等的。

PS pan : before/spanisthemainincent . span 3360 after/span/p但是这些元素实际上并没有在文档中生成。它们在外部是可见的，但是你在文档的源代码中找不到它们，所以它们实际上是“假”元素。

使用伪元素

使用虚拟元素相对容易。before将在内容之前“添加”一个元素，after将在内容之后“添加”一个元素。要向它们添加内容，我们可以使用content属性。

例如，下面的代码片段将在引用前后添加引号。

{ content : open-quote }之前的blockquote:before} block quote : after { content : close-quote；}伪元素样式

虽然作为“假”元素，但实际上，伪元素的行为就像“真”元素一样，我们可以给它们添加任何样式，比如改变它们的颜色、添加背景色、调整字体大小、调整其中的文本等等。

{ content : open-quote }之前的blockquote:beforefont-size :24 pt；文本对齐：居中；线高：42 px；color: # fff背景# ddd浮动：

left;  position: relative;  top: 30px;     }  blockquote:after {  content: close-quote;  font-size: 24pt;  text-align: center;  line-height: 42px;  color: #fff;  background: #ddd;  float: right;  position: relative;  bottom: 40px;  }

指定伪元素尺寸

由于已经设置float，所以无需设置display:black。

blockquote:before {  content: open-quote;  font-size: 24pt;  text-align: center;  line-height: 42px;  color: #fff;  background: #ddd;  float: left;  position: relative;  top: 30px;  border-radius: 25px;  height: 25px;  width: 25px;  }  blockquote:after {  content: close-quote;  font-size: 24pt;  text-align: center;  line-height: 42px;  color: #fff;  background: #ddd;  float: right;  position: relative;  bottom: 40px;  border-radius: 25px;  height: 25px;  width: 25px;  }

关联背景图像

我们也可以替换用图片替换内容而不是只有纯文本。尽管content属性提供了 url()来插入图片,  但是在更多的实例中，我更倾向于使用背景(background)属性从而更好的控制图片。

blockquote:before {  content: " ";  font-size: 24pt;  text-align: center;  line-height: 42px;  color: #fff;  float: left;  position: relative;  top: 30px;  border-radius: 25px;     background: url(images/quotationmark.png) -3px -3px #ddd;     display: block;  height: 25px;  width: 25px;  }  blockquote:after {  content: " ";  font-size: 24pt;  text-align: center;  line-height: 42px;  color: #fff;  float: right;  position: relative;  bottom: 40px;  border-radius: 25px;     background: url(images/quotationmark.png) -1px -32px #ddd;     display: block;  height: 25px;  width: 25px;  }

然而，正如你能够从上面的代码片段中看到的，我们仍旧声明了content属性，而且此时使用了空字符串。content属性是必须的而且应该经常被应用。否则，伪元素无论如何都无法正常工作。

结合伪类

尽管有不同类型的伪X(伪元素、伪类)，我们可以使用伪类连同伪元素一起放入一个CSS规则中，例如，如果我们希望当我们的鼠标移到blockqoute上时，引号的背景色能够略微变深。

blockquote:hover:after, blockquote:hover:before {  background-color: #555;  }

添加过渡效果

我们甚至可以在伪元素上应用transition属性来创建优美的颜色过渡效果。

transition: all 350ms;  -o-transition: all 350ms;  -moz-transition: all 350ms;  -webkit-transition: all 350ms;

更多的灵感

为了激发你的灵感，我们已经选择了三个很酷的例子，可以在web设计上给你很多主意。

迷人的阴影(http://www.paulund.co.uk/creating-different-css3-box-shadows-effects)

在这个教程中 Paul Underwood 解释了如何创建更加逼真和吸引人的阴影效果。

使用 伪元素:before 和 :after 。它们两个都是绝对定位，而且使用负z-index来放置到图片后方实现阴影效果。

3D按钮

这是一个非常聪明的实现，利用伪元素结合CSS3 box-shadow 来绘制一个令人吃惊的3D按钮，仅仅使用了CSS和单一的锚文本。伪元素:before  被用来在按钮的左侧添加数字“1”。

叠加图像效果

使用伪元素来仅仅依靠一个图片标签创建一个“凌乱的”叠加图像效果也是可能的。伪元素用于建立一个图片叠加的错觉，通过使用z-index负值使“叠加”的图片在真正的图片后面来实现。

感谢各位的阅读，以上就是“怎么使用css伪元素before和after”的内容了，经过本文的学习后，相信大家对怎么使用css伪元素before和after这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！