css - 伪元素的样式部分

Question

有什么方法可以将 CSS 样式定位到 :before 和 :after 伪元素的部分内容？

Answer 1

如果您的 :before 伪元素内容与生成元素的内容一起内联显示，您仍然可以定位 :first-line 或 : first-letter 分别覆盖 :before 生成内容的第一行或字母:

div {
    width: 100px;
}

div:before {
    content: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.';
}

div:first-line { font-weight: bold; }
div:first-letter { color: red; }

除此之外，您无法使用 CSS 可靠地定位 :before 或 :after 伪元素的部分，因为伪元素无法生成其他伪元素CSS2.1，只有真正的元素可以。如果您需要为附加内容的首字母设置样式，请先使用 JavaScript 附加该内容。