欢迎访问淘淘IT!QQ:505342486

CSS伪元素选择器:before与:after

时间:2018-07-03 14:20:21    来源:网络    浏览:361
在css标签中有这样子的标签div:before、div:after,对于before、after来说有部分人是相当陌生的,那么这两个标签是什么呢?有什么用处? 

:befor、:after是CSS的伪元素,用CSS手册可以查询到其基本的用法:

E::before 设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用
E::after 设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用 Ie6-7 不支持
说到before、after,必须要提一下content,content用来和:after及:before伪元素一起使用,在对象前或后显示内容。基本的用法如下:
content: normal|string|attr()|url()|counter()|none
其中,normal为默认值,表示不做任何指定内容或改动;string表示指定添加的文本内容;attr()表示插入轩泽的元素的属性值;url()表示插入一个外部资源,如图像,音频等;counter()指定一个计算器作为添加内容;none表示无任何内容。 
   
举个例子,在其中插入图片,就可以写 content: url(img/pic.png);

引用一个demo: 利用before和after制作的一个创意的时尚焦点图相框。效果: 
from clipboard

制作思路以及方法:

1,在图片外层加多一层div,设置1像素的边框线,这样图片看起来是有了边框,而我们想要的只是每两条边框线组成的类似小三角形的形状,那么我们只要把四条边框线的中间部分去掉,就实现了我们的效果。before和after伪元素可以在元素之前或者之后添加新的内容,那我们就利用这两个伪元素来盖住四条边框线的中间部分。

2,先去掉水平方向多余的边框线,在边框层,利用before伪元素,使用绝对定位,设置白色边框,因为要把之前的左右边框中间部分遮掉,颜色设置成和背景色(本例的背景为白色背景)一致,这样子看起来就相当于中间部分被裁剪掉了。

3,继续去掉垂直方向多余的边框线,方法同上,利用after伪元素,使用绝对定位,设置为白色边框,遮掉上下边框线的中间部分。这样,基本的形状就出现了.

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

HTML代码:

<div class="content">
<ul>
  <li><a href="http://www.jiawin.com" target="_blank"><img src="jiawin_1.jpg" />
  <p class="focus"></p></a></li>
  <li><a href="http://www.jiawin.com" target="_blank"><img src="jiawin_2.jpg" />
  <p class="focus"></p></a></li>
  <li><a href="http://www.jiawin.com" target="_blank"><img src="jiawin_3.jpg" />
  <p class="focus"></p></a></li>
  <li id="noborder"><a href="http://www.jiawin.com" 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;
}
利用:before :after还可以做出其他奇妙的样式,比如空心三角. 

from clipboard

代码如下

<body>
    <div id = "demo"></div>
</body>
只简要说一下步骤: 
第一步 画出大体的框,即demo; 
第二步 绘制小三角形 
想要有空心三角形效果这里需要绘制两个三角形,一个大一个小,用内层三角形覆盖外层三角形,直观上只有一个边框。 
绘制小三角形有一个技巧,这里需要讲一下border属性,当元素border很大而元素的宽和高为零的时候,border实际显示的是一个矩形,而如果只显示其中一条边,那么看起来的形状就是一个三角形。 
所以将:after和:before定位到元素的最右边。父元素position定位为relative,伪元素定位为absolute,将其整体移到父元素的最右面,设定top值。具体的细节,就有关于css盒模型了,注意一下border,当伪元素left设为100%时,元素正好处于父元素border-right并且覆盖在上面。 所以当两个小三角形实际显示的效果,看起来就是在大框的右边凸出来的三角边框了。 
   
css代码
#demo {
    width: 100px;
    height: 100px;
    background: #fff;
    position: relative;
    border: 2px solid #000;
}
#demo:after, #demo:before {
    width: 0;
    height: 0;
    content: "";
    border: solid transparent;
    position: absolute;
    left: 100%;
}
#demo:after {
    border-width: 10px;
    border-left-color: #fff;
    top: 20px;
}
#demo:before {
    border-width: 12px;
    border-left-color: #000;
    top: 18px;
}



来源网址:https://blog.csdn.net/zerlinda_c/article/details/50207969

有帮助
(0)
0%
没帮助
(0)
0%
标签: CSS伪元素选择器  before  after  

网友评论

网友评论文明上网理性发言
昵称:

全部评论0条)

o(╯□╰)o 暂无评论,我要抢沙发。
栏目列表
点击排行
more