结合 :first-line :before答案

【问题标题】：combine :first-line :before结合 :first-line :before
【发布时间】：2013-04-08 02:37:54
【问题描述】：

可以结合伪元素 :first-line 和 :before?实际上，除了第一行之外，我想在 p 的任何行之前都有一个字符。我试试：

p:first-line:before{content:""}   
p:before{content:"["}

但它不起作用。

感谢您的任何建议。

【问题讨论】：

标签： css css-selectors pseudo-element

【解决方案1】：

目前不可能像你一样链接它们，我也想不出一种方法来将内容附加到段落的每一行，除了第一行只使用 CSS。此外，content 属性是only used 与:before 和:after。

请参阅http://www.w3schools.com/css/css_pseudo_elements.asp 上的“多个伪元素”部分，了解如何有效地组合伪元素：

p:first-letter {
    color:#ff0000;
    font-size:xx-large;
}
p:first-line {
    color:#0000ff;
    font-variant:small-caps;
}

【讨论】：

【解决方案2】：

不可能有两个连续的伪元素；选择器的 CSS 2.1 syntax 和 CSS3 syntax 都禁止这样做。

W3C CSS Validator 不会将p:first-line:before 报告为错误，但这是一个错误；我为此重新打开了bug report。（如果使用双冒号语法p::first-line::before，则不会触发该错误：验证器说“伪元素 ::first-line 不能出现在上下文 css21 [first-line::before] 中”。 )

在这种情况下，即使该构造有效且受支持，它也无济于事。在:first-line 上使用:before 将毫无意义，因为在第一行的开头插入内容与在元素开头插入内容相同。

而p:before 表示在p 的内容开头的伪元素，而不是在p 的每一行渲染的开头。使用 CSS 无法在元素的每一行的开头插入字符。

【讨论】：