image.png
简介
1 .本身不存在的页面元素,html里面没有这样的元素,但是在页面像是的时候,却能看到这些本来不存在的元素发挥作用
2 .before:选择器向选定的元素前插入内容,使用content属性来指定要插入的内容
3 .after:选择器向选定的元素之后插入内容
4 .从理论上来说,他们和真正的html元素是一样的
5 .最适合的就是图形生成,使用场景就是精致UI上面,讲话HTML代码,提高代码可读性和可维护性.就是把本来需要写在html里面的东西放到了css里面.input checkbox的美化里面就是用的这个
6 .不依赖js可以驱动生成一些不是很重要的视觉元素,比如hover生成tips
7 .兼容性::after这些都支持,但是在里面使用动画,ie和safair不支持
清除浮动
clearfix::before, /*加before是为了防止顶部空白的崩溃（两个盒子之间都有margin的值，会发生重叠）*/
clearfix::after{
content: ' ';
display: table;
}
clearfix::after{
clear: both;
}
扩大按钮的可点击区域,增强用户体验
image.png
1 .其余扩大的方法
1 .margin不行,也会变换原来的位置
2 .
hover或者active的时候做出区别样式
1 .导航栏,hover的时候改变颜色,加一些下划线.这些不需要真正的伪元素,伪元素这个时候就需要了
2 .实现一些优化操作,hover的时候添加一些修饰元素,一些小动画
.hover-circle{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-size: 3rem;
letter-spacing: 0.3rem;
font-weight: bold;
position: relative;
cursor: pointer;
color: #666;
background-color: antiquewhite;
}
.hover-circle::before{
width: 8.5rem;
height: 8.5rem;
border:3px solid pink;
border-radius: 50%;
position: absolute;
opacity: 0;
content: "";
}
.hover-circle::after{
width: 7.2rem;
height: 7.2rem;
border:6px solid pink;
content:"";
border-radius:50%;
position: absolute;
opacity: 0;
}
.hover-circle:hover::before,
.hover-circle:hover::after{
animation-duration: 0.8s;
animation-delay: 0.2s;
animation: circle 0.8s;
}
@keyframes circle{
0%{
opacity: 0;
sclae:1;
}
25%{
opacity: 0.25;
}
50%{
opacity: 0.5;
scale:1.03
}
75%{
opacity: 0.75;
}
100%{
opacity: 1;
scale:1.03;
}
}
4 .我们用 before 伪元素生成一个与按钮大小一致的黑色半透明层 rgba(0,0,0,.2)，在 .btn:hover:before 时显示，用 after 伪元素生成一个与按钮大小一致的白色半透明层 rgba(255,255,255,.2)，在 .btn:active:before 时显示，就可以做到只配置一个背景底色，实现 hover 、active 的时的明暗变化
文字前面加图标
1 .阿里妈妈icon的图标使用不用这种方式,看来这个不行
image.png
image.png
hover生成tips
1 .也就是说,这应该是不需要js实现tips最简单的方法了
<style>
span[data-descr]{
position: relative;
text-decoration: underline;
color:#00F;
cursor: help;
}
span[data-descr]:hover::after{
content:attr(data-descr);
position: absolute;
left: 0;
top: 24px;
min-width: 200px;
border:1px #aaa solid;
background-color: #fffccc;
padding: 12px;
color:#000;
font-size: 14px;
z-index: 1;
}
</style>
</head>
<body>
<p>这是上面代码的实现<br />
我们有一些 <span data-descr="collection of words and punctuation">文字</span> 有一些
<span data-descr="small popups which also hide again">提示</span>。<br />
把鼠标放上去<span data-descr="not to be taken literally">看看</span>。
</p>
变形恢复
1 .可以利用伪元素,实现一些比较特殊的几何图形
单标签动画
1 .通过添加伪元素,可以一个变成3个使用
1 .loading动画
不支持after,before的元素
1 .img,input,iframe:本质就是要想标签支持伪元素,需要这个元素是可以插入内容的,也就是元素要是一个容器.而input,img,iframe等元素都不能包含其他元素,所以不能通过伪元素插入内容
网友评论