[分享]css内容content简答题

CSS中的content属性一般用于在伪元素中插入一些文本内容或特殊符号。它的语法非常简单，只需要在伪元素的::before或::after中设置content属性即可。/ 插入一些文本 / p::b...

CSS中的content属性一般用于在伪元素中插入一些文本内容或特殊符号。它的语法非常简单，只需要在伪元素的::before或::after中设置content属性即可。

/* 插入一些文本 */
p::before {
  content: "在这里插入内容";
}

/* 插入一个小三角形 */
p::after {
  content: "";
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid black;
} 

需要注意的是，content属性中的内容必须使用引号括起来，可以使用单引号或双引号，但是不要混用。另外，在使用content属性时，需要为伪元素设置display属性，否则无法正常显示。

/* 设置伪元素的display属性 */
p::before,
p::after {
  display: inline-block;
  margin-right: 10px;
} 

当然，在content属性中并不仅限于插入文本或特殊符号，也可以插入一些图片，下面是一个简单的示例。

/* 插入一张图片 */
p::before {
  content: url('example.jpg');
  display: inline-block;
  width: 100px;
  height: 100px;
} 

CSS中的content属性非常实用，可以帮助我们轻松实现一些小的视觉效果，同时也可以提高网页的可读性和用户体验。