cssbeforeafter用法

/* 使用 :before 和 :after 伪元素 */

/* 示例1: 在元素前添加内容 */
p:before {
  content: "前置文本 - ";
  color: red;
}

/* 示例2: 在元素后添加内容 */
p:after {
  content: " - 后置文本";
  color: blue;
}

/* 示例3: 使用 :before 和 :after 创建三角形 */
.triangle:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

.triangle:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black;
}

/* 解释说明：
- :before 和 :after 是 CSS 中的伪元素，允许你在元素的内容之前或之后插入生成的内容。
- content 属性是必须的，它指定了要插入的内容。可以是文本、URL 或空字符串。
- 这些伪元素常用于装饰性内容，例如图标、引号、分隔符等。
- 在示例3中，通过设置 border 属性的不同值，可以创建一个三角形效果。
*/