随元素而来，随元素而去，变一变样式，深藏功与名——论伪元素

最新推荐文章于 2024-01-02 15:16:14 发布

笑颜の行方

最新推荐文章于 2024-01-02 15:16:14 发布

阅读量215

点赞数

本文链接：https://blog.csdn.net/weixin_43847418/article/details/99084232

版权

大家好，这里是笑颜の行方。
本篇描述的是页面中一种神奇的存在——伪元素。

在CSS中有这样两个存在：
:before 和 :after

如何使用呢？这需要满足一些条件。
我们先定义一段文本：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  /* 用来写样式 */
  </style>
</head>
<body>
  <p>这是一段文本</p>
</body>
</html>

使用浏览器加载，按下 F12 查看
页面只有这一段文本
只是个段落元素。

好，我们接下来开始使用伪元素。
伪元素需要的条件之一：content 属性（即指，内容）。
我们需要在这段文本的前后添加伪元素，需要这样写：

p:before{
  content: "";
}
p:after{
  content: "";
}

嗯，属性为content，参数为两个英文双引号。（注意：是英文，不是中文。）
（很多人因为在编辑器中输入了中文字符导致运行错误，这点需注意。）
这两个英文双引号之间没有内容，即为空；
加载后呈现出来的效果如下：
查看伪元素详情
注意，点开段落标签，再点击相应的after，再往下看。
这里就是写入的样式
当有了内容属性之后，就算内容为空，伪元素依然存在于段落前后。

当然，我们可以试着加点内容。

p:before{
  content: "前部伪元素";
}
p:after{
  content: "后部伪元素";
}

呈现出来的效果如下：
伪元素有了内容之后的效果
也可以按 F12 键查看到

其实，伪元素不只可以显示文字。
接下来伪元素所需的条件之二：
display属性
嗯，看下方的样式表：

p:before{
  content: "";
  display: block;
}
p:after{
  content: "";
  display: block;
}

解读：内容置空，元素形态更改为块。

再次加载页面，其实没有什么效果。
再添加一些样式呢？

p:before,p:after{
  width: 100px;
  height: 30px;
  background-color: royalblue;
}

解读：这次使用 英文逗号 隔开选择器，实现多元素选择，而样式统一。

显示的效果如下：
前后元素块化
之前显示的文字属于行元素，在段落左右。
现在通过块化伪元素，而排列在元素上下。
设置伪元素样式，可以做到的事情非常多，又不用多写标签，何乐而不为呢？

怎么样？伪元素用起来就这么简单，学会了吗？

笑颜の行方

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
随元素而来，随元素而去，变一变样式，深藏功与名——论伪元素

大家好，这里是笑颜の行方。本篇描述的是页面中一种神奇的存在——伪元素。在CSS中有这样两个存在：:before 和 :after如何使用呢？这需要满足一些条件。我们先定义一段文本：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document&l...
复制链接

扫一扫