简要描述CSS中 content属性的作用 ？
参考回答：
CSS 中的 content 属性主要用于生成内容，它常用于与伪元素 ::before 和 ::after 配合使用，能够在页面中插入文本或其他内容。该属性通常用于插入装饰性或动态内容，而不会直接改变 DOM 结构。
使用示例：
/* 使用 ::before 伪元素插入内容 */
button::before {
content: "→ "; /* 在按钮前插入箭头符号 */
font-size: 20px;
}
/* 使用 ::after 伪元素插入内容 */
button::after {
content: " ←"; /* 在按钮后插入箭头符号 */
font-size: 20px;
}
详细讲解与拓展：
1. 插入文本内容
content 属性可以用来插入文本内容，常见的应用场景包括为某些元素添加装饰性文本、符号或特定的标识。通常与伪元素 ::before 或 ::after 一起使用，它们可以让你在元素的前面或后面插入内容，而不需要修改 HTML 结构。
示例：
/* 在列表项前添加符号 */
ul li::before {
content: "✔"; /* 插入勾号符号 */
color: green;
}
2. 插入空白或分隔符
你可以使用 content 插入空白字符或分隔符，使得页面元素之间的间距或布局更清晰。例如，插入一个斜杠 / 作为分隔符：
nav a::after {
content: " /";
}
3. 使用 content 生成图形或符号
除了文本内容，content 也可以用于插入图像或其他类型的内容。你可以通过 url() 函数插入图像。
/* 在元素后面插入图片 */
img::after {
content: url('icon.png');
}
4. 常用的 content 值
""：插入空内容（通常用作清除伪元素的占位符）。none：不插入任何内容，常用于移除伪元素的内容。attr(attribute)：可以从 HTML 元素的属性中获取值并作为内容插入。例如，content: attr(title)会将元素的title属性的值插入到内容中。
总结：
content 属性是 CSS 中用于生成和插入内容的重要工具，尤其与伪元素 ::before 和 ::after 配合使用时，可以为页面元素添加装饰性内容或符号，而无需修改 HTML 结构。它可以插入文本、符号、图像等，使得网页更加灵活和动态。