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

最新推荐文章于 2025-06-12 23:19:00 发布

zerlinda_c

最新推荐文章于 2025-06-12 23:19:00 发布

阅读量1.3w

点赞数

CC 4.0 BY-SA版权

分类专栏： css随笔文章标签： css

本文链接：https://blog.youkuaiyun.com/zerlinda_c/article/details/50207969

css随笔专栏收录该内容

15 篇文章

订阅专栏

本文介绍了CSS中的伪元素选择器`:before`和`:after`，它们常与`content`属性结合使用，用于在元素前后添加内容。通过示例展示了如何利用这些伪元素制作创意的焦点图相框和空心三角形效果，详细解释了实现原理和CSS代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　在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

1
　　其中，normal为默认值，表示不做任何指定内容或改动；string表示指定添加的文本内容；attr()表示插入轩泽的元素的属性值；url()表示插入一个外部资源，如图像，音频等；counter()指定一个计算器作为添加内容；none表示无任何内容。
　　
　　举个例子，在其中插入图片，就可以写 content： url(img/pic.png);

　　引用一个demo:　利用before和after制作的一个创意的时尚焦点图相框。效果:
　　　　　　　　　　　　这里写图片描述
　　　　　　　　　　　　

制作思路以及方法：

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

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还可以做出其他奇妙的样式，比如空心三角.
　　　　　　　　　　　　这里写图片描述

效果图：
　　　　　　　　　　　　这里写图片描述
代码如下

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