搜索
您的当前位置:首页正文

伪元素::before与::after的用法实例教程

2023-11-27 来源:环绕娱乐网
::before与::after两个伪元素其实是CSS3中的内容,然而实际上在CSS2中就已经有了这两者的身影,只不过CSS2中是前面加一个冒号来表示(:before和:after)。今天主要讲讲这两个伪元素该如何使用。

一、与普通元素一样可以给其添加样式

比如说我想在文字前面添加一个图标,如果我用普通元素写的话我可以这样写:

/*CSS*/.del{ font-size: 20px;}.del i{ display: inline-block; width: 20px; height: 25px; margin-right: 2px; vertical-align: middle; background: url("imgs/delete.png") no-repeat center; background-size: 100%;}.del span{ vertical-align: middle;}
/*HTML*/<div class="del"><i></i><span>删除</span></div>

但是放个空的 i 标签总感觉很不爽,直接把它去掉吧!

/*CSS*/.del{ font-size: 20px;}.del::before{ content: ""; display: inline-block; width: 20px; height: 25px; margin-right: 2px; vertical-align: middle; background: url("imgs/delete.png") no-repeat center; background-size: 100%;}.del span{ vertical-align: middle;}
/*HTML*/<div class="del"><span>删除</span></div>

这里就直接用::before伪元素代替了空的 i 标签,两者效果相同:

同样利用这一点,我们可以使用::after伪元素解决经典清除浮动的问题:

.clearfix::after{ display:block; clear:both; content:""; overflow:hidden; height:0; }

当然,如果你网站还需要兼容IE8,那还是用:after吧,::after不兼容。

二、在元素中插入文本

有时候我可能需要在许多元素中同时加入相同的文字,那么可以考虑用这两个伪元素。例如:

/*CSS*/.up:after{ content: '↑'; color: #f00;}.down:after{ content: '↓'; color: #0f0;}
/*HTML*/<p class="up">上升</p><p class="down">下降</p>

实现效果如下:

三、在元素中插入图像

实现类似本文第一个例子中的图片加文字效果,也可以使用伪元素直接插入图片而不需要使用背景图,就像这样:

/*CSS*/.del{ font-size: 20px;}.del::before{ content: url("imgs/delete.png"); display: inline-block; margin-right: 2px; vertical-align: middle; }.del span{ vertical-align: middle;}

但是需要非常注意的是,使用这种方式插入的图片并不能通过控制伪元素的大小来改变图片的大小,只能引入固定大小的图片(这个略坑啊...),所以个人觉得最好还是老老实实用背景图片比较好。

四、插入连续项目编号

可能你会说,加入连续项目编号还不简单吗?直接用有序列表ol不就行了嘛!

是,确实是可以实现,就像这样:

<p>我的爱好:</p><ol><li>吃饭</li><li>睡觉</li><li>打豆豆</li></ol>

这是Chrome下的效果:

看起来挺好,没啥问题,那我若想给前面的序号加粗呢?一脸懵逼了...

这时候你说,那我直接在每条文字前手动加标签和数字,然后给标签加上样式不就行了么?

/*CSS*/ul li{ list-style: none;}ul li span{ font-weight: bold;}
/*HTML*/<p>我的爱好:</p><ul><li><span>1.</span>吃饭</li><li><span>2.</span>睡觉</li><li><span>3.</span>打豆豆</li></ul>

没错,现在是三条,要是是三十条,三百条,怎么办?一条条加?(很傻很天真...)

这时候若用纯CSS的方式,还得用到伪元素:

/*CSS*/ul li{ list-style: none; counter-increment: number;} //number相当于是个变量,随便取名就好,在伪元素中调用ul li::before{ content: counter(number)"."; font-weight: bold;} //注意这里不同于JS,counter(number)与"."之间不需要加任何东西,直接连接就好
/*HTML*/<p>我的爱好:</p><ul><li>吃饭</li><li>睡觉</li><li>打豆豆</li></ul>

效果如下:

那我如果不想要阿拉伯数字,我就想用中文数字可以么?

可以!伪元素很好很强大!

ul li{ list-style: none; counter-increment: number;} ul li::before{ content: counter(number,cjk-ideographic)"、"; font-weight: bold;}

效果如下:

除了这个cjk-ideographic,你还可以使用更多CSS中 list-style-type 属性:(直接贴上w3cshool里面的表格)

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

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的区别 它们的用法

before与after两个单词是英语中的高频词汇,它们的用法也容易混淆,所以下面我就给大家详细讲解下这两个单词的区别。

一、读音不同

before 英[bɪˈfɔː(r)] 美[bɪˈfɔːr]

after 英[ˈɑːftə(r)] 美[ˈæftər]

二、释义不同

before

prep.    之前; 在…以前; 在…面前(或前面); (次序或排列)在前面; 当面;    

conj.    在…以前; 到…为止; 到…之前; 以免; 不然; (宁可…而)不愿;    

adv.    以前; 过去; 已经;    

after

prep.    之后; (时间)在…后; 表示反复不断或一个接着一个; 跟随; 追赶; 在(某人)后面; 在…后面,仅次于; 与…对照; 鉴于; 尽管; 寻找; 关于; 模仿;    

conj.    在…以后;    

adv.    以后; 后来; 向后; 在后面;    

adj.    以后的; 后来的; 靠近 ( 船或飞机 ) 后部的;    

三、用法不同

before用作介词,表示时间,意为“在……以前”,其后只能接点时间或具有点时间意义的其他名词,而不能接一段时间。例句:

We arrived there two days before Christmas.我们于圣诞节前两天到达那儿。

before用作介词,表示在两者中选择其一,意为“宁可……而不愿……”。例句:

They would die before surrendering.他们宁死而决不投降。

after作介词,after+名词,作为介宾短语。例句:

He ran after the bus.他在那辆公交车后追着跑。

after作介词,after+动名词 ,也是作为介宾短语,例句:

I will go to bed after drinking the milk.喝完牛奶我就睡觉。

四、双语例句

before

1、Test the heat of the water before getting in. 

入水之前先试一试水温。

2、It would be a good idea to call before we leave. 

我们出发之前打个电话是个好主意。

3、It was many years before the full story was made public. 

许多年之后,事情的全貌才公之于众。

4、I'd like a second opinion before I make a decision. 

我在作决定之前,想听听别人的意见。

5、I didn't have time to change clothes before the party. 

我没时间在聚会前更换衣服。

after

1、I think we could all use a drink after that! 

我想我们在事情办完之后都得痛快地喝一杯。

2、I need time to get my wind back after that run. 

我跑过之后需要时间喘口气。

3、I've told you time after time not to do that. 

我一再告诉过你不要干那件事。

4、I could come next week, or the week after. 

我可能下周来,或者再下一周。

5、The first 24 hours after the operation are the most critical. 

病人手术后头24小时是最危险的。

before的用法 before和after区别

1、表示“在……之后……才”。副词“才”在汉语中强调某事发生得晚或慢。如果在含有before从句的复合句中,强调从句动作发生得晚或慢时,就可以应用这种译法。

2、用于句型“It + will/would be + 时间段 + before...”句型中,表示“要过多久才…”,也可用于“It + may be + 时间段 + before...”,表示“也许要过多久才……”。其否定形式“It will/would not be +时间段+ before…”表示“不久就……,过不了多久就……”。

3、before和after区别:before作连词意思是在 ... 以前。作介词意思是在 ... 以前;在..前面。作副词意思是以前;以往;之前。

after作副词意思有以后;后来。作连词意思是在 ... 以后。作介词意思有在 ... 之后;在后面;关于;追赶;依照。作形容词意思是以后的。

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

前两天看 文档 看到选择器那块儿的时候,前面4个基本都能理解: .class , #id , element , element, element ,但后面两个 ::after 和 ::before (文档中说,分别表示在view 组件的后面和前面插入内容),表示有点没有理解。于是上网仔细查了下。以下是笔记

wxml

wxss

js

效果

其实,after和before可以添加的不仅仅是像上面这种字符串,以下是可以添加的常用的内容

具体的请参考这篇文章

环绕娱乐网还为您提供以下相关内容希望对您有帮助:

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

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

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; pseudo-elements test by zhou2003737 p{ color: deepskyblue;...

css 伪元素before after怎么用

:before是css中的一种伪元素,可用于在某个元素之前插入某些内容。:after是css中的一种伪元素,可用于在某个元素之后插入某些内容。可以看下这个简单的例子:http://www.runoob.com/try/try.php?filename=trycss_sel_...

after和before的例句

二、after的用法:after可用作连词连接一个时间状语从句,从句中一般用现在时表示将来。after用作副词时常与soon, ever搭配,通常用于表示时间的名词后。after用作副词时不用于比较等级。after和in的使用:从某时说到多少时间...

使用前缀:before和后缀:after的好处,以及它们的应用场景,

应用:写法是 :before和:after,举例这里将出现在blockquote元素的之前和之后,添加的内容。blockquote:before { content: open-quote;} blockquote:after { content: close-quote;} ...

伪元素before和after用法的区别

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

html怎样把一张图片弄到输入框里面??

方法为:可以使用before或者after伪元素来实现。具体的操作步骤如下:1、首先,创建一个新的html文件并编写一个input标签,如下图所示。2、其次,将after伪元素添加到input标签前面的span标签,然后将伪元素的背景设置为要添加...

before与after的区别 它们的用法

before引导的从句常用省略句型。 after的用法: after可用作连词连接一个时间状语从句,从句中一般用现在时表示将来。 after用作副词时常与soon, ever搭配,通常用于表示时间的名词后。 after用作副词时不用于比较等级。 注意after和in的使用...

CSS3 怎么分清伪元素和伪类。举例子

伪类用于向某些选择器添加特殊的效果。伪元素用于将特殊的效果添加到某些选择器。伪类有::first-child ,:link:,vistited,:hover,:active,:focus,:lang 伪元素有::first-line,:first-letter,:before,:after 使用...

Top