CSS中的before和after到底有什么用?

发布于 2019-05-30 17:56:17

CSS3中的animation和transition的区别?
<style type="text/css">
.wrap{

width:200px;
height:200px;
text-align:center;
line-height:200px;
background-color:#369;
margin:20px auto;

}
p{

position:relative;
text-align:center;
font-size:15px
color:red;
padding:20px;
border:1px solid red;  
margin:30px;

}
/ 明确表示了,after在<p>的文本的意思就是在元素的内容的前后添加内容 /
p::after{

content:"";
position:absolute;
background-color:yellow;

top:0px;        
bottom:0px;        
left:70%;        
right:50px;

}
p::before{

content:" ";        
position:absolute;  
background-color:blue;
 
top:0px;        
bottom:0px;        
left:70%;        
right:50px; /* before和after处在用一个位置,为什么after会覆盖掉before的样式  */ }    

</style>
<body>

<div class="wrap">This is a content</div>
<p>This is a passage</p>

</body>
代码如上。

我看了一些解析before和after这两个伪元素用法的视频代码讲解,但是仍存有一些疑问。

1、before和after是可以在元素内容的前后添加内容,通常结合content使用。我只知道如果<p>HelloWorld</p>使用before和after 的content:"Something add here",就会在HelloWorld前后添加content。

2、【新手提问】但是如果我把before和after当成盒子模型来设置,设置在同一个位置,设置不同的背景颜色,为什么after会覆盖before?(如上述代码)

3、【新手提问】before和after本质是在元素内容的前后添加内容,但是他们可以随意设置位置,就无所谓前后一份,那么他们有什么用?

4、【新手提问】如果在<div></div>中使用before和after的话,那这个前后添加内容是指哪里的前后?我一直以为 before是在div的上面,即覆盖div,而after就是在盒子的后面,即在下面 被div覆盖。如果不是这样,在div中的before和after的前后指的是哪里?

查看更多

关注者
0
被浏览
501
1 个回答
Spark
Spark 认证专家 2019-05-30
PHP网站开发,小程序开发,服务器运维

你需要明确以下两点

CSS中的伪元素通常是添加到选择器上,强调对该元素匹配的某些待定部分设置样式

伪类则用来改变基于选择的元素的特殊状态,来元素样式,比如 :hover,:checked, :visited 。

具体来讲,

在css中 ::before 创建一个伪元素,其将成为匹配选中的元素指定位置。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。

需要注意的是, 由::before 和::after 生成的伪元素是不应该使用在单标签元素上,比如<img/> <br/>,换句话来讲,它们只能用于包裹标签上(成双成对的,div就是最典型的代表)。

a::before {
content: "♥abc";
color:red;
}
强调!!!

before,after伪元素,不是在被修饰元素的前后,准确的来说是在被修饰元素包裹的内容前后,插入伪元素content指向的内容。如果不清楚,请看插件后的源码,比如上述样式生成的html代码,黑心形所指向的伪元素是否在a标签包围之下,就知道了。

补充目前正式成为标准伪元素有以下几个

::after

::before

::first-letter

::first-line

::selection

它们常见的应用场景有

插入一些小图标,当然指的是字体图标

清除浮动(通常内容content属性为空)

撰写答案

请登录后再发布答案,点击登录

发布
问题

分享
好友

手机
浏览

扫码手机浏览