CSS中伪元素详解和用法例子详解

朱雀 2023-10-13 08:36 3阅读 0赞

#### 文章目录 ####

*  一、教学视频
 *  二、伪元素介绍
 *  三、::before和::after
 *  四、::first-line和::first-letter
 *  五、::selection
 *  六、::placeholder

## 一、教学视频 ##

教学讲解视频：[视频地址][Link 1]

## 二、伪元素介绍 ##

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

![在这里插入图片描述][7c864e8c2bf14b8c890f6833e7ce61cf.png]  
再举个例子，鼠标悬浮改变下拉箭头方向，松开再次改变：

<!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>

![在这里插入图片描述][c62cbbf9ab764079a524364f4182b2a5.gif]

## 四、::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>

![在这里插入图片描述][ae2391d51bc74d59bfdd04f34bdf65bf.png]

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <style>
    
      div::first-letter {
          
        color: green;
      }
    
    </style>
      <div>杨杨吖<br/>杨杨吖</div>
    </html>

![在这里插入图片描述][c0a92029e91a47c0a65480645879e082.png]

## 五、::selection ##

`::selection` 匹配鼠标长按拖动选中的内容。  
![在这里插入图片描述][80a5c4890f4e451ab5bac75b63a3cab1.gif]

## 六、::placeholder ##

`::placeholder` 用于设置input元素的placeholder内容的样式。

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <style>
    
      input::placeholder {
          
        color: red;
      }
    
    </style>
      <input placeholder="请输入"/>
    </html>

![在这里插入图片描述][51629f4e58774c2b97fa546ef2af8269.png]

[Link 1]: https://www.bilibili.com/video/BV1fu41157CV
[7c864e8c2bf14b8c890f6833e7ce61cf.png]: https://img-blog.csdnimg.cn/7c864e8c2bf14b8c890f6833e7ce61cf.png
[c62cbbf9ab764079a524364f4182b2a5.gif]: https://img-blog.csdnimg.cn/c62cbbf9ab764079a524364f4182b2a5.gif
[ae2391d51bc74d59bfdd04f34bdf65bf.png]: https://img-blog.csdnimg.cn/ae2391d51bc74d59bfdd04f34bdf65bf.png
[c0a92029e91a47c0a65480645879e082.png]: https://img-blog.csdnimg.cn/c0a92029e91a47c0a65480645879e082.png
[80a5c4890f4e451ab5bac75b63a3cab1.gif]: https://img-blog.csdnimg.cn/80a5c4890f4e451ab5bac75b63a3cab1.gif
[51629f4e58774c2b97fa546ef2af8269.png]: https://img-blog.csdnimg.cn/51629f4e58774c2b97fa546ef2af8269.png