有了第一小节的经验，我们可以对直接的动画效果做一些升级效果，如果组合:before、:after，效果有更酷。
请先看一下效果示例吧：
下面一个一个示例讲解
示例一
解析：
1、:before top为0，:after bottom为0
2、在绝对定位的作用下，:hover改变:before、:after的高度，:before就会向下延伸，而:after就会向上延伸。
3、同时我们是在:hover时，才赋予:before、:after背景色，所以还有背景色过渡效果。
这里我们还可以换成左右合并的样式，小伙伴们可以自行研究。
示例二
解析：
1、:before、:after的border画出2个三角形，且他们的 bottom 为 0，而:before的left=0，:after的right=0
请看下方示例：
.triangle{
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent transparent #f13f84;
border-width: 100px 0 0 100px;
}
2、然后改变border-width，就会形成向上合并的效果
示例三