伪类小技巧

一、伪元素实现边框效果

.before:hover {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}
.after {
    position: relative;
    padding: 1em;
    background-color: #fff;
}
.after:before {
    content: "";
    position: absolute;  
    top: 0;
    right: 0;
    bottom: 0;  
    left: 0;
    z-index: 0;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    opacity: 0;
    will-change: opacity;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}
.after:hover:before {
    opacity: 1;
}

<section class="cssTrick-container-first">
    <div class="before">
        <h1>Before</h1>
        <p>Animate/transition box-shadow 可以使用box-shadow属性来实现盒子阴影效果,但重绘消耗较多</p>
    </div>
    <hr />
    <div class="after">
        <h1>After</h1>
        <p>通过修改伪元素的透明度来实现同样的效果,没有重绘消耗</p>
    </div>
</section>

实现思路是利用opacity属性实现隐藏显示,可以避免before中的repaint

效果如下

Before

Animate/transition box-shadow 可以使用box-shadow属性来实现盒子阴影效果,但重绘消耗较多


After

通过修改伪元素的透明度来实现同样的效果,没有重绘消耗

伪元素实现面包屑的分隔符

.cssTrick-container-second{
    ul.breadcrumb {
        padding: 8px 16px;
        list-style: none;
        background-color: #eee;
    }
    ul.breadcrumb li {
        display: inline;
    }
    /* 利用+排除掉第一个li */
     ul.breadcrumb li+li:before {
        padding: 8px;
        color: black;
        content: "/\00a0";
       
    }
    /* another way */
    /* ul.breadcrumb li:after {
        padding: 8px;
        color: black;
        content: "/\00a0";
       
    }
    ul.breadcrumb li:last-child:after{
        content:'';
    } */

    ul.breadcrumb li a {
        color: green;
    }
}
<section class="cssTrick-container-second">
    <ul class="breadcrumb">
        <li><a href="#">firstMenu</a>
        </li>
        <li><a href="#">secondMenu</a>
        </li>
        <li><a href="#">thirdMenu</a>
        </li>
        <li>End</li>
    </ul>
</section>

效果如下

按钮效果实现

实现思路:利用伪元素定位到四周形成边框,在使用transition对属性做动画

效果如下

代码过长 自行F12查看

效果1
效果2

三角箭头

箭头实现

思路:上下两个边框搞成透明,左边加上颜色

 border-top:20px solid transparent;
 border-left:20px solid #eee;
 border-bottom:20px solid transparent;
 width:0;
 height:0;

再利用伪元素的定位来实现如下效果