为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

慕容818178 2019-03-25 20:34:45
<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的前后指的是哪里?

查看完整描述

1 回答

已采纳
?
pardon110

你需要明确以下两点

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

  2. 伪类则用来改变基于选择的元素的特殊状态,来元素样式,比如 :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

它们常见的应用场景有

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

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

查看完整回答
反对 回复 2019-03-26

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信