点击这里给我发消息 QQ登录
【原创】 CSS伪元素before、after
栏目:前端  作者:力涛  阅读:(739)

基本的用法:

  • E:before/E::before 设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用

  • E:after/E::after 设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用

  • Ie6-7 不支持

既然说到了before、after,那么我们也要大概的了解下content,content用来和:after:before伪元素一起使用,在对象前或后显示内容。

基本的用法如下:

div:after{content:'任意字符串';}

1、 在图片层加多一层div,设置1像素的边框线,边框线有上下左右四条边框,而我们想要的只是每两条边框线组成的类似小三角形的形状,那么我们只要把四条边框线的中间部分去掉,那不就实现了我们的效果。那我们应该怎么把四条边框线中间部分去掉?或者用什么东西把他盖住,不让他显示出来?解决办法就是,我们知道before和after伪元素可以在元素之前或者之后添加新的内容,那我们就利用这两个伪元素来盖住四条边框线的中间部分。

2、 先去掉左右两边的边框线,在边框层,利用before伪元素,使用css样式的定位,设置白色边框,为什么要白色的边框呢?因为要把之前的左右边框中间部分遮掉,颜色设置成和背景色(本例的背景为白色背景)一致,这样子看起来就相当于中间部分被裁剪掉了。

3、继续去掉上下两条边框线,方法同上,利用after伪元素,使用css样式的定位,设置为白色边框,遮掉上下边框线的中间部分。这样子一来,基本的形状就出现了

4、美化步骤,调整我们的细节,边框线调整为虚线。

HTML代码:

<div class="content"> <ul>  <li><a href="#" target="_blank"><img src="jiawin_1.jpg" />  <p class="focus"></p></a></li>  <li><a href="#" target="_blank"><img src="jiawin_2.jpg" />  <p class="focus"></p></a></li>  <li><a href="#" target="_blank"><img src="jiawin_3.jpg" />  <p class="focus"></p></a></li>  <li id="noborder"><a href="#" target="_blank"><img src="jiawin_4.jpg" />  <p class="focus"></p></a></li> </ul> </div>

CSS样式代码

.content {width:788px; margin:auto; height:auto; overflow:hidden; padding:30px; } .content ul li {float:left; height:176px; border-right:1px solid #DDDDDD; position:relative; padding:10px;} .focus {background:rgba(250,250,250,0.25); width:174px; height:174px; border:1px dashed #666; position:absolute; left:10px; top:10px; display:none;} .focus:before {width:174px; height:134px; border-left:1px solid #fff; border-right:1px solid #fff; content:''; position:absolute; left:-1px; top:20px;} .focus:after {width:134px; height:174px; border-top:1px solid #fff; border-bottom:1px solid #fff; content:''; position:absolute; top:-1px; left:20px;} .content ul li:hover .focus {display:block;} #noborder {border-right:0 none;}




昵称
邮箱
域名
  记住 通知博主
验证码