css :after

作者：逐鹿↘星恒发布日期:2026-04-20 浏览:118

/* 示例代码：使用 :after 伪元素 */

/* 基本用法 */
div:after {
    content: " 这是通过 :after 添加的内容";
    color: red;
}

/* 实际应用示例：清除浮动 */
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

/* 装饰性用途 */
p:after {
    content: url('decorative-icon.png');
    margin-left: 5px;
}

解释说明：

基本用法：
- content 属性用于指定插入的内容。在这个例子中，:after 伪元素会在每个 div 元素的后面插入一段文本。
- color 属性用于设置插入内容的颜色。
清除浮动：
- clearfix 是一个常见的 CSS 技巧，用于解决父元素无法包裹浮动子元素的问题。
- content: "" 表示插入一个空字符串。
- display: table 和 clear: both 用于确保浮动元素被正确清除。
装饰性用途：
- 可以通过 content: url() 插入图片作为装饰。
- margin-left 用于调整图片与文本之间的间距。

上一篇：translate css

下一篇：css箭头