css 中content的用法

CSS中的content是用于在页面上插入额外的内容，这种内容不一定来自HTML代码，而是通过CSS样式来生成的。

使用content属性需要与:before和:after这两个伪元素结合使用。这两个伪元素可以在HTML元素的前后添加内容。

p:before {
    content: "[";
}
p:after {
    content: "]";
}

上面的代码会在每个

元素的前后分别添加一个中括号，可以通过控制:before和:after的content实现很多有趣的效果，比如在引用文字前后添加引号，或者在列表项前添加一些图标。

ul li:before {
    content: "\2713";
    margin-right: 5px;
    color: red;
}
    

上面的代码会在每个无序列表的列表项前添加一个红色的✓，这种方式可以让列表更加有吸引力，更符合需求。

需要注意的是，content属性只能用于伪元素:before和:after，否则将会无效。另外，content属性并不支持使用变量，要插入动态文本需要使用JavaScript来实现。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！