您的当前位置:首页伪元素:Before和:After的学习_html/css

伪元素:Before和:After的学习_html/css

2023-11-27 来源:瑞奇养生

  层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”。

你一定听说过这个词,尤其是当你一直关注着我们的教程。点此浏览原作者的其他文章

事实上,的确有一些CSS家族的成员(CSS选择器)被分类为伪元素比如::first-line, :first-letter, ::selection, :before and :after。但是,就本文而言,我们将把我们探讨的范围限制在:before 和 :after这两个元素上。因此,本文中的“伪元素”将特指这两个伪元素(:before 和 :after),我们将从基础入手,来研究这个独特的主题。

 关于语法和浏览器支持

伪元素实际上在CSS1中就存在了,但是我们现在所讨论的:before和:after则发布于CSS2.1中。在最初,伪元素的语法是使用“:”(一个冒号),随着web的发展,在CSS3中修订后的伪元素使用“::”(两个冒号),也就是::before 和 ::after?以区分伪元素和伪类(比如:hover,:active等)

然而,无论你使用单冒号还是双冒号,浏览器都将能识别它们。由于IE8只支持单冒号的格式,安全起见如果你想要更广泛的浏览器兼容性那么还是使用单冒号的格式吧!

 它是做什么的

简而言之,伪元素将会在内容元素的前后插入额外的元素,因此当我们添加它们时,使用以下的标记方式,他们在技术上是平等的。

:before

This the main content.

:after

但是这些元素实际上并不在文档中生成。它们将在外部可见,但是你将不会在文档的源代码中找到它们,因此,实际上它们是“虚假”的元素。

 使用伪元素

使用伪元素是相对容易的,:before将会在内容之前“添加”一个元素而:after将会在内容后“添加”一个元素。在它们之中添加内容我们可以使用content属性。

举例来说,下面的代码片段将在引用的之前和之后分别添加添加一个引号。

blockquote:before {

content : open-quote ;

blockquote:after {

content : close-quote ;

 伪元素样式

尽管作为“虚假”的元素,事实上伪元素表现上就像是“真正”的元素,我们能够给它们添加任何样式,比如改变它们的颜色、添加背景色、调整字体大小、调整它们中的文本等等。

blockquote:before {

content : open-quote ;

font-size : 24pt ;

text-align : center ;

line-height : 42px ;

color : #fff ;

background : #ddd ;

float : 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 ;

 指定伪元素尺寸

默认生成的元素是一个内联元素,于是当我们想要指定它们的高度和宽度的是偶,我们首先不得不使用display: block把它们声明为块级元素。

由于已经设置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设计上给你很多主意。

  迷人的阴影

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

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

3D按钮

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

叠加图像效果

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

 结论

伪元素很酷同时也是可应用到实际工作中的,基本上,每一个我们所添加的元素都不会干扰现有的HTML结构,而且伪元素可以做到 几乎所有我们能想到的事情。

实际上有一些伪元素的改进工作,目前逐步进行,比如伪元素嵌套div::before::before { content: ”; }以及多重伪元素div::before(3) { content: ”; }。很显然,在未来的web设计中,这些改进会让我们的设计有更多的形式(更多的可能性)。然而,他们将会在最新的浏览器中得到支持,让我们现在耐心的等待吧!

原文出处: Thoriq Firdaus

小编还为您整理了以下内容,可能对您也有帮助:

CSS 中的 :before 和 :after 的一点小知识点

:before 选择器在被选元素的内容前面插入内容。

定义中提到,是在被选元素的 内容 前面插入内容,如下图,div 是一个容器,div 中的内容是 testDiv元素 ,css 中的 :before 和 after 都显示在 div 内部,二者分别位于 testDiv元素 内容的前后。

所以可以看到,伪元素也是被选元素的内容,只是会插入到被选元素原本内容的前后。

插入的伪元素默认是 display 属性,如果想要为伪元素设置宽高等,需要修改伪元素的 display 属性为 inline-block 或者 block 。

伪元素插入的位置是被选元素的 内容 的前或者后,因此本质上伪元素也是被选元素的子元素。所以定位时,被选元素就是伪元素的父元素。

如图,被选元素 test-div 设置了 position: relative ,外部元素 test-wrapper 也设置了 position: relative ,然后对被选元素的伪元素 :after 设置定位,可以看到,伪元素的位置是根据 test-div 来定位的,因此,可以验证 被选元素就是伪元素的父元素 这句话。

伪元素before和after用法的区别

区别:
1)before是css中的一种伪元素,可用于在某个元素之前插入某些内容。
2)after是css中的一种伪元素,可用于在某个元素之后插入某些内容。
简单的代码测试:

<style>
p:before{
content: "H" /*:before和:after必带技能,重要性为满5颗星*/
}
p:after{
content: "d" /*:before和:after必带技能,重要性为满5颗星*/
}
</style>
<p>ello Worl</p>

以上的代码将会在页面中展现的是"Hello World"。通过浏览器的"审查元素"看到的内容是:
<p>
::before
"ello Worl"
::after
</p>

p标签内部的内容的前面会被插入一个:before伪元素,该伪元素内包含的内容是"H";而在p标签内的内容后面会被插入一个:after伪元素,该元素包含的内容是"d"。作为一只合格的程序猴子,捍卫"Hello World"的完整存在是必要的。

伪元素before和after用法的区别

区别:
1)before是css中的一种伪元素,可用于在某个元素之前插入某些内容。
2)after是css中的一种伪元素,可用于在某个元素之后插入某些内容。
简单的代码测试:

<style>
p:before{
content: "H" /*:before和:after必带技能,重要性为满5颗星*/
}
p:after{
content: "d" /*:before和:after必带技能,重要性为满5颗星*/
}
</style>
<p>ello Worl</p>

以上的代码将会在页面中展现的是"Hello World"。通过浏览器的"审查元素"看到的内容是:
<p>
::before
"ello Worl"
::after
</p>

p标签内部的内容的前面会被插入一个:before伪元素,该伪元素内包含的内容是"H";而在p标签内的内容后面会被插入一个:after伪元素,该元素包含的内容是"d"。作为一只合格的程序猴子,捍卫"Hello World"的完整存在是必要的。

CSS中"::after与::before"的作用是什么?

首先要明白一种思想:结构和样式分离。

结构和样式分离,就意味着:没有样式表,HTML文档也是一个完整的文档;没有样式表,也能正常阅读用HTML表达的所有内容。明白这种思想就能很好理解样式表中使用------ :before 和 :after中的content: ""; ------就算没有------:before 和 :after中的content: "";------HTML文档也不会受到影响,HTML文档也是一个完整的文档,所以,用简单的话来说: :before 和 :after中的content: "";不过是对HTML的装潢,使HTML看起来更漂亮一些。

延展阅读

CSS中伪元素after的作用

css可以对元素做的事,对这个伪元素都可以做,然后也不奇怪能做出个三角形了(三角形是用很宽的边框+内容宽高都为0做出来的)。

但是,伪元素因为不在DOM里存在,也不会在调试工具里显示,所以不太好调试伪对象:after还有一个重要的用法--清除浮动。

这种清除浮动的方法几乎成了一个固定的模式,很多大型网站里面都有用到。

以下代码:

.weibo-clearfix:after{clear:both;content:".";display:block;height:0;width:0;visibility:hidden;}

::after与::before的作用是什么?CSS中

就是可以在某个标签的前面或者后面添加一个虚拟元素,需结合content使用。

css可以对元素做的事,对这个伪元素都可以做,然后也不奇怪能做出个三角形了(三角形是用很宽的边框+内容宽高都为0做出来的)但是,伪元素因为不在DOM里存在,也不会在调试工具里显示,所以不太好调试。

伪对象:after还有一个重要的用法--清除浮动。这种清除浮动的方法几乎成了一个固定的模式,很多大型网站里面都有用到。

易于使用和修改

CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理。

另外,可以将相同样式的元素进行归类,使用同一个样式进行定义,也可以将某个样式应用到所有同名的HTML标签中,也可以将一个CSS样式指定到某个页面元素中。如果要修改样式,我们只需要在样式列表中找到相应的样式声明进行修改。

以上内容参考:百度百科-CSS

瑞奇养生还为您提供以下相关内容希望对您有帮助:

伪元素before和after用法的区别

1)before是css中的一种伪元素,可用于在某个元素之前插入某些内容。2)after是css中的一种伪元素,可用于在某个元素之后插入某些内容。简单的代码测试:&lt;style&gt; p:before{ content: "H" /*:before和:after必带技能,...

::after与::before的作用是什么?CSS中

css可以对元素做的事,对这个伪元素都可以做,然后也不奇怪能做出个三角形了(三角形是用很宽的边框+内容宽高都为0做出来的)但是,伪元素因为不在DOM里存在,也不会在调试工具里显示,所以不太好调试。伪对象:after还...

css中 li:before 与 li:after

ul.box li:before { :before元素的内容之前插入新内容 z-index: -2;属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。position: absolute;生成绝对定位的元素 background: transparent;...

如何用JQuery操作CSS伪文档元素before或after中的content

::before,::after是伪元素并非doom元素,所以jquery无法选择伪元素。如果确实需要实现修改伪元素的样式,可以通过下面的例子。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;pseudo-eleme...

css的:after是什么意思呢?

简单的可以理解是尾巴。其实这是css不好理解的一个东西,不好理解的地方在于,我始终不清楚为什么会有这么一个东西。请看下面大屏幕标的地方,和我右边自定义的css。

html5中的div有一个:after起什么作用

::before创建了一个伪元素(跟伪造类类似,如:hover),位置在第一个子元素的位置,常用用于通过content属性来设置一些装饰性的内容;这个元素的属性默认是inline的。::after也一样是伪元素,只不过位置是在子节点里面最后一个...

css中的&amp;是什么意思?

&amp;表示在嵌套层次中回溯一层,即 &amp;:before相当于.clearfix:before,&amp;:after相当于.clearfix:after。而:before和:after是CSS中的伪元素,表示在应用clearfix类的元素前和后插入指定内容。

微信小程序 CSS 选择器::after和::before的简单使用

前两天看 文档 看到选择器那块儿的时候,前面4个基本都能理解: .class , #id , element , element, element ,但后面两个 ::after 和 ::before (文档中说,分别表示在view 组件的后面和前面插入内容),表示有...

HTML和CSS的发现与理解

在::before和::after伪元素选择器中必须定义content属性; 浏览器会为这2个伪元素选择器分别生成相应的盒子,这些盒子是作为元素的非主盒子;弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性...

CSS选择器a:after和html body div.a是什么意思

在css标签中有这样子的标签div:before、div:after,对于before、after来说有部分人是相当陌生的,那么这两个标签是什么呢?有什么用处? :befor、:after是CSS的伪元素,用CSS手册可以查询到其基本的用法:E::before 设置在...

Top