[分享]css中after中写content

CSS中的 ::after 伪元素是在选定元素的内容后面插入内容。通过在 ::after 伪元素中使用 content属性，可以向元素添加新内容，而无需修改文档的 HTML。selector::aft...

CSS中的 ::after 伪元素是在选定元素的内容后面插入内容。通过在 ::after 伪元素中使用 content属性，可以向元素添加新内容，而无需修改文档的 HTML。

selector::after {
  content: "添加的内容";
} 

为了使 ::after 伪元素正常工作，在 content 属性中必须指定一些内容。否则，伪元素将不会生效。

content 属性支持以下值：

• none: **不**插入内容。
• normal: 插入正常文本。
• attr(attribute): 插入元素属性的值。
• counter(name): 插入指定计数器的值。
• open-quote/close-quote: 插入引号。
• url(): 插入图像。

/* 插入一张图像 */
selector::after {
  content: url("example.png");
}

/* 插入引号 */
selector::after {
  content: open-quote;
}

/*插入元素的属性值*/
selector::after {
  content: attr(data-text);
} 

使用 ::after 伪元素时，一定要注意内容的位置和样式。因为它是一种插入文本的方式，所以它可能会影响页面的排版和布局。

总之， ::after 伪元素是一种非常有用的技术，可以通过向元素添加新内容来改善页面的功能和外观。使用它可以使 CSS 更加灵活和强大。