css after

作者：风外听竹发布日期:2026-03-01 浏览:116

/* 使用 :after 伪元素的示例 */

/* 定义一个基础样式 */
.example {
  position: relative;
  padding: 20px;
  background-color: #f0f0f0;
}

/* 使用 :after 伪元素在 .example 元素之后添加内容 */
.example:after {
  content: "这是通过 :after 添加的内容";
  position: absolute;
  bottom: -20px; /* 调整位置，使其出现在元素下方 */
  left: 0;
  background-color: #ddd;
  padding: 5px;
  font-size: 12px;
}

解释说明：

:after 是 CSS 中的伪元素，用于在指定元素的内容之后插入生成的内容。
content 属性是必须的，它指定了要插入的内容。可以是文本、URL 或其他值。
在这个例子中，:after 伪元素被用来在 .example 元素之后添加一段文本，并通过定位 (position: absolute) 将其放置在元素的底部外部。
你可以根据需要调整 bottom、left 等属性来改变生成内容的位置。

上一篇：transition css

下一篇：css禁止换行