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

这里是杨杨吖

已于 2023-07-16 15:02:42 修改

阅读量2.6k

点赞数 5

分类专栏：开发记录文章标签： css 前端

于 2023-06-30 15:46:34 首次发布

本文链接：https://blog.csdn.net/dgfdhgghd/article/details/131476826

版权

开发记录专栏收录该内容

59 篇文章 27 订阅

订阅专栏

本文介绍了CSS中的伪元素，如::before和::after用于在元素前后添加内容，::first-line和::first-letter针对首行和首字母的样式，::selection处理选中内容的样式，以及::placeholder用于设置输入框占位符的样式。通过实例展示了这些伪元素的使用方法。

摘要由CSDN通过智能技术生成

一、教学视频

教学讲解视频：视频地址

二、伪元素介绍

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