前言
本文涉及伪元素概要和用法，包括悬停提示、清除浮动及图形生成。
正文
W3C详尽列举了伪元素的值，分别有：first-letter、first-line、before、after。
先说第一组：first-letter和first-line；它们在CSS1标准中被定义，"first-letter" 伪元素用于向文本的首字母设置特殊样式，"first-line" 伪元素用于向文本的首行设置特殊样式，两者都只能用于块级元素，如p元素。
重点是第二组：before和after；它们在CSS2标准中被定义，可以在元素内容的前面或者后面插入新内容，如图片等。先看一段来自MDN的引言：
CSS伪元素
::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。
这里顺便提一下语法，双冒号::伪元素表示法是在CSS 3中引入的，用以区分伪类和伪元素（如:hover），当然::符号往下兼容、使用CSS2时代的表示法也是可以的。
- 来一段代码开开胃：
<!-- HTML -->
<h1>案例：伪元素制作悬浮提示</h1>
<p>
浮世万千，吾爱有三：
<span data-descr="日为朝">日</span> 、
<span data-descr="月为暮">月</span>、
<span data-descr="卿为朝朝暮暮">卿</span>。
</p>
/* CSS */
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: 100px;
border: 1px #aaaaaa solid;
border-radius: 10px;
background-color: #ffffcc;
padding: 6px;
color: #000000;
font-size: 14px;
z-index: 1;
}
看看效果：
伪元素制作提示.gif
- 上面的情境有点浪漫，咳咳，且看下面这个伪元素高频应用：浮动清除。
<!-- HTML -->
<body>
<div class="clearFolat">
<div class="box float">
left
</div>
<div class="box float">
right
</div>
<p>段落1</p>
<p>段落2</p>
</div>
<div class="box">
参照盒子
</div>
</body>
/* CSS */
body {
margin: 0;
}
.clearFolat {
border: 1px solid black;
}
.clearFolat::after {
content: "";
display: block;
clear: both;
}
.box {
width: 200px;
height: 200px;
line-height: 200px;
border: 1px solid white;
background-color: green;
color: black;
text-align: center;
opacity: 0.9;
}
.float {
border-radius: 40px;
border: 1px solid black;
}
.float:nth-of-type(1) {
float: left;
background-color: red;
}
.float:nth-of-type(2) {
float: right;
background-color: yellow;
}
p{
background-color: #5F9EA0;
}
.normal {
background-color: #0000FF;
}
效果录屏：
伪元素清除浮动.gif
-
最后一个应用：伪元素画星星，画月亮主要利用了border-radius和box-shadow属性，下图是效果：
moon and star.png
星星由3个三角形拼成，画它的过程比较考验当年的平面几何基本功，折腾了蛮久，惭愧~~代码中部分参数计算如下：
200 * tan(36°) ≈ 145
145 * tan(18°) ≈ 47
代码如下：
<!-- HTML -->
<div id="shape">
<div id="moon">
</div>
<div id="star-five">
</div>
</div>
/* CSS */
#shape {
width: 400px;
margin: 200px auto;
position: relative;
}
#star-five {
margin: 0px auto;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 200px solid transparent;
border-bottom: 145px solid rgba(255, 0, 0, 1);
border-left: 200px solid transparent;
transform: rotate(36deg);
}
#star-five:before {
content: '';
display: block;
position: absolute;
top: -103px;
left: -122px;
height: 0;
width: 0;
border-bottom: 145px solid rgba(255, 0, 0, 1);
border-left: 47px solid transparent;
border-right: 47px solid transparent;
transform: rotate(-36deg);
}
#star-five:after {
content: '';
display: block;
position: absolute;
top: 0px;
left: -200px;
width: 0px;
height: 0px;
border-bottom: 145px solid rgba(255, 0, 0, 1);
border-left: 200px solid transparent;
border-right: 200px solid transparent;
transform: rotate(-72deg);
}
#moon {
width: 400px;
height: 400px;
border-radius: 50%;
box-shadow: 60px 60px 40px 40px rgba(255, 255, 0, 1);
position: absolute;
top: -100px;
left: 60px;
}
结语
伪元素的好处在于可以简化HTML代码，提高可读性和可维护性；在图形生成的应用中更是巧妙，在不加载图片资源的情况下实现了精致的UI，真是令人难忘！
网友评论