CSS :before :after应用

发表于 | 分类于

前面总结过将Flex布局应用在区块图的布局中，现在需要在区块.block之间显示每个块产生的时间间隔，以及一个小三角符号。这里总结用伪元素:before ，:after 来实现该效果。

伪元素

基本语法格式

selector:pseudo-element {property:value;}
selector.class:pseudo-element {property:value;}

作用

方便给某些选择器添加特殊效果。

:before

用来给指定的元素的内容之前插入新内容；

:after

用来给指定的元素的内容之后插入新内容。

举个栗子

.first:before{
    content: 'It\'s ';
    color: blue;
}

<p class="first">me</p>
  • 效果：

例1

说明

  • 通过伪元素 :before ，:after添加的新内容区域默认的display 属性值为inline。可以像修改其他元素一样修改它的样式，可以将它的 display 属性值来改为 block。

  • 对于伪元素 :before 和 :after ，属性 content 必须设置。

  • 属性 content 的值可以是多类型的

再举栗子

1 . 可以是一张图片的url

content: url( "img/me.png" )

2 . 可以配合伪类使用，常配合伪类 :hover

.first:hover:before{
    content:'It\'s ';
    color:red;
 }
<p class="first">me</p>

注意两者使用的顺序，伪类 :hover 在前，伪元素:before在后，如果顺序改为 .before:before:hover ,则无效。

  • 效果：

例2

鼠标移上去就显示It’s，且颜色是红色

3 . 配合取值函数attr()使用

a:before{
     content: attr(title);
}
<a href="http://www.taobao.com" title="我的最爱">买买买</a>
  • 效果：

例3

我的练习

最终效果图

图1

图1 两个红色线框中的内容为实现效果

实现代码

HTML结构

图2

图2 3个大的横排div，每个横排大div里，假设都有5个.block区块div

CSS设置

以.rowMiddle行里的.block为例，用:before控制小三角的显示和位置；用:after控制区块产生的间隔时间的显示和位置

/.rowMiddle中每个.block后面的小三角符号的处理，控制 :before/

.rowMiddle .block:not(:first-child)::before{
    content: '';
    display: block;
    width: 9px; 
    height: 9px;
    background-image: url(../images/chainicon1.png);
    background-repeat: no-repeat;
    position: absolute;
    top: 60%;
    left: -20%;
}

/.rowMiddle中每个.block的产生时间间隔，控制 :after/

.rowMiddle .block:not(:first-child)::after{
    content: attr(data-content);
    font-size: 12px;
    display: block;
    width: 36px; 
    height: 15px;
    line-height: 15px;
    position: absolute;
    top: 30%;
    left: -27%;
}

注：attr(data-content)中 data-content的值通过js计算得到。每个.block的产生时间间隔不同，在js中为每个.block添加一个.timewait类，并设置属性data-content的值。

JS代码
$(".rowMiddle .block").each(function(i){
    // 控制after伪类,为每个block添加不同的产生时间信息
    // CSS中的.attr只能应用在伪类中的content属性
    var timeWait = 0;
        timeWait = blockData[4+i].time - blockData[5+i].time;
        $(this).addClass('timewait').attr('data-content',timeWait+'秒');
});
-------------完-------------