3

Consider this HTML/CSS scenario:

p { content:'x'; }
p:before, p:after { content:inherit; }
<p></p>

In Firefox, 'xx' will be displayed. In Chrome and in IE nothing is displayed.

In assessing what I think should happen, I've taken into account the following snippets from the CSS 2.1 spec:

12.1 The :before and :after pseudo-elements

The :before and :after pseudo-elements inherit any inheritable properties from the element in the document tree to which they are attached.

So, in general, inheriting a property into a :before and :after pseudo-elements from their containing element should work (and it does work for other properties).

12.2 The 'content' property

'content' Value: normal | none | [ | | | attr() | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit

So "inherit" is a valid value for the content property

Computed value: On elements, always computes to 'normal'. On :before and :after, if 'normal' is specified, computes to 'none'. Otherwise, for URI values, the absolute URI; for attr() values, the resulting string; for other keywords, as specified.

The important thing here is that this discusses the computed value of the property. Also note that the computed value for elements like the <p> element in the example should be normal

Applies to: :before and :after pseudo-elements

1.4.2.3 Applies to

This part lists the elements to which the property applies. All elements are considered to have all properties, but some properties have no rendering effect on some types of elements. ...

So "applies to" is a rendering rule, and does not determine whether the property is meaningful for the element, because all CSS properties are always meaningful.

6.2.1 The 'inherit' value

Each property may also have a cascaded value of 'inherit', which means that, for a given element, the property takes the same specified value as the property for the element's parent. The 'inherit' value can be used to enforce inheritance of values, and it can also be used on properties that are not normally inherited.

Note that it is the specified value that is inherited, not the computed value. For the <p> element of the example, the specified value of the content property is "x".

Now, in IE's DOM inspector, the computed value of the content for the p element is normal, taken from a specified value of "x". This seems correct to the spec, but the specified value is not being inherited by the pseudo-elements.

In Chrome's DOM inspector, the computed value of the content for the p element is not shown at all! Why Chrome should omit any property is unknown to me. Calling window.getComputedStyle(el).content on the element returns "x". As with Firefox, the seems to be incorrect to the spec.

In Firefox's DOM inspector, the computed value of content for the p element is "x". This seems incorrect according to the spec, which says that the computed value should be normal. However, the specified value is being inherited by the pseudo-elements.

So I conclude that all three of Firefox, IE, and Chrome's behaviour are in some way bugged, but that Firefox is correct in displaying "xx" for the example scenario.

Have I missed anything relevant?

Alohci
  • 78,296
  • 16
  • 112
  • 156
  • `content` is slated to become applicable to elements in Generated Content 3, even in the ongoing rewrite, so while the current behavior does not conform to CSS2.1, the implementations are unlikely to change. Chrome in particular doesn't seem to care at all for the 2.1 spec on pseudo-elements, neither selectors nor rendering, as a lot of its proprietary features require actively violating the spec. – BoltClock May 22 '15 at 02:43
  • 1
    Cascading and Inheritance 3 [says](http://www.w3.org/TR/css-cascade-3/#inherited-value) that the inherited value is taken from the parent element's *computed value* rather than its specified value. Not sure if this is relevant, as I'm not sure if other properties reflect this specification in any browser. – BoltClock May 22 '15 at 02:55

1 Answers1

-2

According to this gentleman's answer as to what styles can be inherited, content is not a property that inherits. Which CSS properties are inherited?

Also on the w3.org website you referenced, there is no description for how the inherit property ought to be handled, while there is a note on all the other possible values, it seems `

> [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote |
> close-quote | no-open-quote | no-close-quote ]+`

To me this implies inherit may be a valid value, but it has no real use. Or it may be a typo...?

It seems some browsers do operate on the inherit value, but it appears inconsistent and unreliable, and therefore I'd suggest avoiding it. You can probably achieve much the same thing with a data attribute.

One caveat I'll add to that, is that considering how the layering works with pseudo elements, I'd perhaps expect the :after pseudo element to inherit the content of :before, if :before sets it's content in some other way. https://css-tricks.com/pseudo-element-roundup/

However no browser behaves this way right now. If you try this fiddle, firefox is the only one you see something in after, and it's inheriting from the base element. http://jsfiddle.net/8Lsp7c7j/1/

Community
  • 1
  • 1
Harry Robbins
  • 530
  • 4
  • 17
  • 1
    "Inherited" in that answer means "inherited by default". The `inherit` value can be applied to any property, including all of the ones where "Inherited" is listed as no. – BoltClock May 22 '15 at 02:24
  • Thanks for the clarification on that Bolt. I'm curious how well adding manual inheritance works in most cases - as it seems rather buggy in Alohci's pseudo element example. – Harry Robbins May 22 '15 at 16:35