html伪类元素居中,总结css伪类的几种常见操作

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

前言

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

几个小栗子

1. 清除浮动

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

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

.clear:after{

display:block;

content:"";

height:0;

clear: both;

overflow:hidden;

visibility:hidden;

}

2. 让元素垂直居中

.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属性。

• Home
• Picture
• pic1

ul.breadcrumb{

margin: 500px 500px;

list-style: none;

}

ul.breadcrumb li{

display: inline;

}

ul.breadcrumb li+li:before{

content: '/';

padding: 10px;

}

5. 对话框小箭头

hello!

注意这里要用: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. 提示框

TOOLTIP BOTTOM

这里是提示内容！！

.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;

}

}

hello world

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;

}

avatar

参考链接

​