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

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 回答

  • 1 回答
  • 0 关注
  • 1679 浏览
慕课专栏
更多

添加回答

举报

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