combine :first-line :before

问题

it is possibile to combine the pseudo-element :first-line and :before? Actually I'd like to have a character before any line of a p except the first one. I try:

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

but it do not work.

Thank you for any suggestion.

回答1:

It's not currently possible to chain them as you have, nor can I think of a way to append content to every line of a paragraph except the first with just CSS. Further, the content property is only used with :before and :after.

See the section "Multiple Pseudo-elements" on http://www.w3schools.com/css/css_pseudo_elements.asp to see how you can effectively combine pseudo elements:

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

回答2:

It is not possible to have two pseudo-elements in succession; both the CSS 2.1 syntax and the CSS3 syntax for selectors forbid that.

The W3C CSS Validator does not report p:first-line:before as an error, but this is a bug; I re-opened a bug report on this. (The bug is not triggered if the two-colon syntax p::first-line::before is used: the validator says “The pseudo-element ::first-line can't appear here in the context css21 [first-line::before]”.)

It would not help in this case even if the construct were valid and supported. Using :before on :first-line would be pointless, since inserting content at the start of the first line would be the same as inserting it at the start of the element.

And p:before means a pseudo-element at the start of the content of p, not at the start of each rendered line of p. It is not possible to insert a character at the start of each line of an element using CSS.

来源：https://stackoverflow.com/questions/16024366/combine-first-line-before

标签

css

css-selectors

pseudo-element