伪元素
- 伪元素不是独立的 HTML 元素，而是依附于某个已有的真实 HTML 元素。它的生命周期完全由父元素决定，父元素存在时才能渲染。
- 这个子元素不会出现在 DOM 中，但可以通过 CSS 样式进行控制。
::after是一个 CSS 伪元素，用于在 HTML 元素的内容之后插入一个虚拟的子元素。
::after 的常见用途
- 添加装饰性内容（如图标、分隔线）。
- 构建复合形状（如箭头、对话框）。
- 动态内容添加（如标签、标记等）。
基本语法
selector::after {
content: 'string'; /* 必须指定内容，可以是文本、图片、空内容 */
display: block | inline | inline-block; /* 设置显示类型 */
position: relative | absolute; /* 常结合父元素定位 */
}
注意：
::after必须设置content属性，否则伪元素不会显示。
示例
示例结构
- 将相关css代码放在lc.css文件中
- lc.html内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="lc.css">
<
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
