码迷,mamicode.com
首页 > 其他好文 > 详细

伪类元素before与after

时间:2019-02-15 22:35:54      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:技术   标准   .com   color   div   jpg   对象   一起   height   

1、selector:before( sRules ) 它要和content属性一起使用,设置在对象前(依据对象树的逻辑结构)发生的内容;

2、selector:after( sRules ) 和before用法一样,不过它是设置在对象后(依据对象树的逻辑结构)发生的内容;

<style>

.div{width:350px; border:1px solid #000; line-height:50px; margin:10px;}

.divb{width:500px; border:1px solid #FC0;}
.after,.before,.block{border:1px solid #330;}
.after:after{content:‘我在后面吧‘; color:#F00;}
.before:before{content:‘我在前面吧‘; color:#F00;}
.block:after{content:‘我是块元素,我占一行‘; color:#F00; display:block;}
.block{display:block;}

</style>

<body>

<div class="div">after<span class="after">我是里面的内容</span></div>
  <div class="div">before<span class="before">我是里面的内容</span></div>
  <div class="divb">block<span class="block">我是里面的内容</span></div>

</body>
运行结果如图!我为什么要把<span class="block">转换为块级元素呢?因为块元素插入内联元素不符合标准,不规范,不转化的话显示有问题。我也不清楚.

技术图片

伪类元素before与after

标签:技术   标准   .com   color   div   jpg   对象   一起   height   

原文地址:https://www.cnblogs.com/qianphong/p/10386105.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!