总结css伪类的几种常见操作

为了良好的代码高亮阅读体验，建议查看github原文。

前言

对于伪类来说，大家都很熟悉，但通常都是用:hover做一些样式的更改和:before，:after也是常用在给元素添加一些东西之类。原理上都是这样的，我将在这篇文章中总结一些伪类的使用技巧。

几个小栗子

1. 清除浮动

<div class="wrapper">

    <img src="./avatar.jpg" class="avatar">

</div>

图片设置了左浮动后，由于包裹元素没有设置高度，会脱离文档流。这时就需要给图片清除浮动。

利用:after，使包裹元素中的子元素清除浮动。

.clear:after{

    display:block;

    content:""; 

    height:0;

    clear: both;

    overflow:hidden; 

    visibility:hidden;

}

<div class="wrapper  clear">

    <img src="./avatar.jpg" class="avatar">

</div>

2. 让元素垂直居中

 <div class="wrapper middle">

    <img src="./avatar.jpg" class="avatar">

</div>

.wrapper{

    width:300px;

    height:300px;

    background-color: pink;

    text-align: center;

}

.avatar{

    vertical-align: middle;

}

.middle::after{

    display: inline-block;

    width:0; 

    height:100%;

    content:'';

    vertical-align: middle;

}

3. 给盒子添加阴影

.btn:hover{

    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);

}

4. 面包屑导航

用:before添加content属性。

<ul class="breadcrumb">

        <li><a href="#">Home</a></li>

        <li><a href="#">Picture</a></li>

        <li><a href="#">pic1</a></li>

</ul>

ul.breadcrumb{

    margin: 500px 500px;

    list-style: none;

}

ul.breadcrumb li{

    display: inline;

}

ul.breadcrumb li+li:before{

    content: '/';

    padding: 10px;

}

5. 对话框小箭头

 <div class="arrow-right">hello!</div>

注意这里要用:before而不是:after。

 .arrow-right{

    margin: 500px auto;

    width:300px;

    height:80px;

    background-color: antiquewhite;

    padding-left: 20px;

}

.arrow-right:before{

    background-color: antiquewhite;

    content: "";

    display: block;

    width: 0;

    height: 0;  

    border-top: 10px solid #fff;

    border-bottom: 10px solid #fff;

    border-left: 20px solid antiquewhite;

    position: relative;

    top:14px;

    left: 300px;

}

6. 提示框

 <a href="#" class="tooltip">

    <span>TOOLTIP BOTTOM</span>

    <span class="tooltip-content">这里是提示内容！！</span>

</a>

.tooltip{

    position: relative;

    display: block;

    margin: 0 auto;

    width: 300px;

    height:100px;

    line-height: 100px;

    border:1px solid grey;

    text-align: center;

    vertical-align: middle;

    overflow: hidden;

}

.tooltip:hover{

    overflow: visible;

}

.tooltip-content{

    position: relative;

    z-index: 3;

    display: block;

    width: 300px;

    height:100px;

    background-color: #4fabff;

    color:#fff;

    top:20px;

}

.tooltip-content:before{

    display: inline-block;

    content:"";

    width:0;

    border-left: 10px solid transparent;

    border-right: 10px solid transparent;

    border-bottom:20px solid #4fabff;

    position: relative;

    top:-54px;

    left:40px;

}

7. 自动打字效果

这个代码写的不太严谨，因为每个字的宽度不一样，所以光标不是正正好好在字后面的，有兴趣的同学可以研究下。

.inner{

    height:inherit;

    width: auto;

    position: relative;

    display: block;

}

.inner::after{

    content:'';

    display: block;

    position: absolute;

    top: 0;

    right: 0;

    width:100%;

    margin-top: 30px;

    height: 45%;

    background-color: pink;

    letter-spacing: 1em;

    border-left:2px solid #fff;

    animation: width-animation 0.8s steps(11) infinite alternate; 

}

@keyframes width-animation{

    0% {

        width:100%;

    }

    100%{

        width:260px;

    }

}

<p class="wrapper">

    <span class="inner">hello world</span>

</p>

8. 文章水印

article{

    position: relative;

}

article:after{

    position: absolute;

    content:'2018/8/20';

    display:block;

    width: inherit;

    font-size:100px;

    text-align: center;

    color:rgba(0,0,0,0.1);

    opacity: 0.5;

    top:20px;

    left: 120px;

}

9.图片遮罩

.mask{

    position: absolute;

    width:100px;

    height:100px;

    z-index:2;

    color:#fff;

    line-height: 100px;

    text-align: center;

    transition: all 0.5s;

    opacity: 0;

}

.mask:hover{

    background-color: rgba(0,0,0,0.3);

    opacity: 1;

}

 <div class="wrapper">

    <div class="mask">avatar</div>

    <img src="./avatar.jpg" alt="" class="avatar"/>

</div>

参考链接

1. 从青铜到王者10个css3伪类使用技巧和运用，了解一哈

2. :after伪类+content内容生成经典应用举例

​