转载【CSS进阶】伪元素的妙用--单标签之美

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

1.单个颜色实现按钮 hover 、active 的明暗变化

请点击 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果

2.利用after伪类清除浮动

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }

3.增强用户体验，使用伪元素实现增大点击热区。适合用在点击区域较小的移动端,PC端看上去是很奇怪的哦

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>扩大点击热区域</title>
<style>
.click-area {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%); /*触发层叠上下文*/
width: 240px;
text-align: center;
line-height: 100px;
background-color: #00aabb;
color: #fff;
font-size: 200%;
border-radius: .5em;
}
.click-area:hover:after {
content: "AAA";
}
.click-area:after {
position: absolute;
left: -10px;
top: -10px;
right: -10px;
bottom: -10px;
background-color: deeppink;
border-radius: .5em;
z-index: -1;
}
</style>
</head>
<body>
<a class="click-area">click-Area</a>
</body>
</html>

4.利用伪类元素实现换行，替换<br/>标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>利用伪类实现换行,替换br标签</title>
<style>
body {
font: 150%/1.6 Baskerville, Palatino, serif;
}
dt, dd {
display: inline;
margin: 0;
}
dd {
font-weight: 600;
}
dt::after {
content: "\A"; /*换行*/
white-space: pre;
}
dd + dd::before {
content: ', ';
font-weight: normal;
margin-left: -.25em;
}
</style>
</head>
<body>
<dl>
<dt>书籍分类</dt>
<dd>经典著作 · 哲学类 </dd>
<dd>社会科学 · 政治法律 </dd>
<dd>军事科学 · 财经管理</dd>
<dd>历史地理 · 文化教育 </dd>
</dl>
</body>
</html>

5.变形恢复【为了平面图形变形后可以不让文字变形】

菱形diamond

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菱形</title>
<style>
html {
font-family: "microsoft yahei";
}
.diamond {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
line-height: 200px;
text-align: center;
color: #FFFFFF;
font-size: 200%;
}
.diamond::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: deeppink;
transform: rotateZ(45deg);
z-index: -1; }
</style>
</head>
<body>
<div class="diamond">.diamond</div>
</body>
</html>

平行四边形 parallelogram

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>平行四边形</title>
<style>
html {
font-family: "microsoft yahei";
}
.parallelogram {
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
width: 280px;
text-align: center;
line-height: 150px;
font-size: 200%;
color: #FFFFFF;
}
.parallelogram::before {
content:"";
position:absolute ;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: #00AABB;
color: orangered;
z-index: -1;
transform: skew(-.07turn);
}
</style>
</head>
<body>
<div class="parallelogram">.parallelogram</div>
</body>
</html>

梯形 trapezoid

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>利用旋转与透视实现</title>
<style>
html {
font-family: "microsoft yahei";
}
.trapezoid {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 160px;
text-align: center;
padding: 60px;
color: #FFF;
font-size: 200%;
}
.trapezoid:after {
content: "";
position: absolute;
left: 0;top: 0;right: 0;bottom: 0;
background-color: #00aabb;
/*perspective 透视 scale缩放 rotateX绕X轴旋转*/
transform:perspective(30px) scale(1.2) rotateX(5deg);
transform-origin: bottom;
z-index: -1;
}
</style>
</head>
<body>
<div class="trapezoid">.trapezoid</div>
</body>
</html>

纯CSS实现hover效果按钮放大背景变暗效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>纯CSS实现hover效果按钮放大背景变暗效果</title>
<style>
html {
font-family: "microsoft yahei";
}
.spectiveBlur {
position: absolute;
left: 50%;
top: 50%;
width: 220px;
line-height: 160px;
text-align: center;
border-radius: 10px;
transform: translate(-50%, -50%);
background-color: #E91E63;111111
font-size: 200%;
color: #fff;
cursor: pointer;
transition: transform .2s ;
}
.spectiveBlur:hover {
transform: translate(-50%, -50%) scale(1.2);
box-shadow: 0 0 0 1920px rgba(0,0,0,.6);
}
</style>
</head>
<body>
<div class="spectiveBlur">.spectiveBlur</div>
</body>
</html>