一、伪元素介绍

伪元素：用于创建一些不在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>