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 附加该内容。

Answer 2

当您说只是伪元素的一部分时，我不明白。要定位样式:after并将:before它们视为块元素，您需要具备的基本条件是：

.element:after, .element:before {
    content: " ";
    display: block;
    width: 100px;
    height: 100px;
}