Consider this HTML / CSS script:
p { content:'x'; }
p:before, p:after { content:inherit; }
<p></p>
Firefox will display "xx". In Chrome and IE nothing is displayed.
When evaluating what I think should happen, I took into account the following snippets from the CSS 2.1 specification:
12.1: before and: after pseudo-elements
: before and: after pseudo-elements inherit any inherited properties from the element in the document tree to which they relate attached.
So, in the general case, property inheritance in: before and: after pseudo-elements from their containing element should work (and it works for other properties).
12.2 Property "content"
'' : | | [| | | attr() | | | no-open-quote | no-close-quote] + |
, "inherit" content
: On "normal". On: before : after, "normal", "none". URI - URI; attr(), ; , .
, . , , <p> , normal
:: before :
1.4.2.3
, . , ....
, " " , , CSS .
6.2.1 "inherit"
'inherit', . "inherit" , , .
, , . <p> content "x" .
, IE DOM, p normal, "x" . , .
Chrome DOM p ! Chrome - , . window.getComputedStyle(el).content "x". Firefox, , .
Firefox DOM p "x" . , , normal. .
, , Firefox, IE Chrome - , Firefox "xx" .
- ?