一、教学视频
教学讲解视频：视频地址
二、伪元素介绍
伪元素：用于创建一些不在DOM树中的元素，并为其添加样式。
三、::before和::after
::before 伪元素可以用来创建一个内部元素，它的内容会覆盖在父元素的内容之前。
::after 伪元素可以用来创建一个外部元素，它的内容会覆盖在父元素的内容之后。
这里有个注意点，content是必须的，如果不写content，伪元素会失效。
先看下面简单的应用：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>
div::before {
content: '哈哈，';
color: red
}
div::after {
content: '，您好！';
color: green
}
</style>
<div>杨杨吖</div>
</html>
再举个例子，鼠标悬浮改变下拉箭头方向，松开再次改变：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>
div {
position: relative;
width: 200px;
height: 35px;
line-height:35px;
}
div::after {
content: "";
position: absolute;
top: 8px;
right: 10px;
width: 10px;
height: 10px;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
transform: rotate(45deg);
transition: all 0.3s;
}
div:hover::after {
content: "";
position: absolute;
top: 8px;
right: 10px;
width: 10px;
height: 10px;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
transform: rotate(225deg);
transition: all 0.3s;
}
</style>
<div>杨杨吖</div>
</html>
四、::first-line和::first-letter
::first-line 只能用于块级元素。用于设置附属元素的第一个行内容的样式。
::first-letter 只能用于块级元素。用于设置附属元素的第一个字母的样式。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>
div::first-line {
color: green;
}
</style>
<div>杨杨吖<br/>杨杨吖</div>
</html>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>
div::first-letter {
color: green;
}
</style>
<div>杨杨吖<br/>杨杨吖</div>
</html>
五、::selection
::selection 匹配鼠标长按拖动选中的内容。
六、::placeholder
::placeholder 用于设置input元素的placeholder内容的样式。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>
input::placeholder {
color: red;
}
</style>
<input placeholder="请输入"/>
</html>
