Zerlinda's Blog

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

在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制作的一个创意的时尚焦点图相框。效果: :before,:after 制作思路以及方法:

  1. 在图片外层加多一层div,设置1像素的边框线,这样图片看起来是有了边框,而我们想要的只是每两条边框线组成的类似小三角形的形状,那么我们只要把四条边框线的中间部分去掉,就实现了我们的效果。before和after伪元素可以在元素之前或者之后添加新的内容,那我们就利用这两个伪元素来盖住四条边框线的中间部分。
  2. 先去掉水平方向多余的边框线,在边框层,利用before伪元素,使用绝对定位,设置白色边框,因为要把之前的左右边框中间部分遮掉,颜色设置成和背景色(本例的背景为白色背景)一致,这样子看起来就相当于中间部分被裁剪掉了。
  3. 继续去掉垂直方向多余的边框线,方法同上,利用after伪元素,使用绝对定位,设置为白色边框,遮掉上下边框线的中间部分。这样,基本的形状就出现了.
  4. 美化步骤,调整细节,边框线调整为虚线。

HTML代码:

<div class="content">
  <ul>
    <li><a href="http://www.ilovecc.ren" target="_blank"><img src="photo.jpg" />
    <p class="focus"></p></a></li>
    <li><a href="http://www.ilovecc.ren" target="_blank"><img src="photo.jpg" />
    <p class="focus"></p></a></li>
    <li><a href="http://www.ilovecc.ren" target="_blank"><img src="photo.jpg" />
    <p class="focus"></p></a></li>
    <li><a href="http://www.ilovecc.ren" target="_blank"><img src="photo.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 代码如下

<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;
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注