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

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (254)

Mysql (58)

DedeCms (33)

jQuery (67)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

CSS伪元素选择器 before after

打开边栏(ESC) 关闭边栏(ESC)

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

赏