css伪元素before,after实现的一些效果

总觉得css的伪元素是很有用的东西,平常用的最多的就是last-child, first-child(设置表格边框样式),before, after…
能通过css直接实现的东西,效果还ok的话,当然最好还是用css啦,而且伪元素兼容性也很好。
下面列举了一些使用伪元素before, after实现的例子

示例图

hover效果

这些例子大都通过对元素设置position:relative,其before, afterposition:absolute来布局。
仅贴出部分css代码,具体代码可访问文末的codepen地址

不规则背景图/图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// html部分-pug
.card-wrapper
.bg
.content

// css部分-stylus
.card-wrapper
width 300px
height 500px
overflow hidden
border-radius 10px
box-shadow 0px 0px 15px #fff
.bg
width 100%
height 250px
background-image url('http://img1.3lian.com/2015/a1/20/d/136.jpg')
background-position 80% 42%
.content
background #fff
height 250px
padding 10px
position relative
&::before
content ''
border-color transparent #fff #fff transparent
border-width 30px 150px 30px 150px
border-style solid
position absolute
top -60px
left 0px

和图层设计类似,content的before是一块三角区域,遮挡了图片的一部分,形成不规则图片的效果

不完整边框

就是指卡片上方的文字左上角和右下角的边框,也可以用这样的方式给文字始末加上特殊样式的引号,书名号等符号。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// html部分-pug
span.corner-border-btn

// css部分-stylus
$borderSize = 12px
$borderPadding = 10px
.corner-border-btn
color #000
position relative
cursor pointer
top 30%
padding 0px 10px
transition all .5s
&:hover
padding 0px 30px
font-size 1.2rem
&:before, &:after
content ''
position absolute
width $borderSize
height $borderSize
&:before
border-left 1px solid #000
border-top 1px solid #000
left -($borderPadding)
top -($borderPadding)
&:after
border-right 1px solid #000
border-bottom 1px solid #000
bottom -($borderPadding)
right -($borderPadding)

表格hover行列高亮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// html部分-pug
table.hover-link-table
... // 内容部分 tr td

// css部分-stylus
.hover-link-table
border 1px solid #ccc
table-layout fixed
border-collapse collapse
overflow hidden // 必须
tr:not(:last-child)
border-bottom 1px solid #ccc
tr td:not(:last-child)
border-right 1px solid #ccc
td
height 30px
position relative
cursor pointer
z-index 1
&:hover
z-index 0
&:after, &:before
z-index -1
position absolute
content ''
background rgba(255, 248,220, .5)
&:after
top 0px
left -1000px
height 100%
width 2000px
&:before
left 0px
top -1000px
width 100%
height 2000px

其实这样的方式不太好,因为table或容器元素的overflow要设为hidden, 如果还需要在table上做其他特殊样式的话,也许会有冲突,比如添加tooltip(有些库默认添加在当前元素后,可通过属性配置,设置container为body元素即可解决冲突)

气泡对话框

关于气泡框,看完以下两篇文章,基本就不成问题了。
css制作各式各样的三角形
css实现气泡对话框Demo

这里也写了个简单的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// html部分-pug
.bubble.yellow 你喜欢我吗

// css部分-stylus
.bubble
height 20px
border-radius 5px
padding 10px
position relative
&.yellow
background #FFF68F
&:after
border-color #FFF68F transparent
right 10%
border-width 20px 20px 0px 0px
&:after
position absolute
content ''
bottom -20px
border-style solid

时间轴效果

其实做时间轴不一定要用到before和after, 如果标记时间轴点的元素比较复杂的话,因为content不原生支持html的格式,所以还是不太够的,根本上还是归功于absolute布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// html部分-pug
.timeline-item
.content-box

// css部分-stylus
$themeColor = #FFDAB9
.timeline-item
position relative
padding 0px 20px 0px
border-left 2px solid $themeColor
&::before
position absolute
content ''
border-radius 50%
background $themeColor
width 10px
height 10px
left -6px

总而言之

before, after是神器,有待好好发掘!
附上CodePen地址,例子都整合在一起了。

文章目录
  1. 1. 不规则背景图/图片
  2. 2. 不完整边框
  3. 3. 表格hover行列高亮
  4. 4. 气泡对话框
  5. 5. 时间轴效果
  6. 6. 总而言之
,