User-Agent: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:18.104.22.168) Gecko/2008092318 Fedora/3.0.2-1.fc9 Firefox/3.0.2 Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:22.214.171.124) Gecko/2008092318 Fedora/3.0.2-1.fc9 Firefox/3.0.2 If there is a ":before" pseudo element (selector, w/e) in a declaration for, say "h2" element, and also that "h2" is carrying a "text-transform: capitalize;" selector, then capitalisation isn't done on the "h2" at first, but rather on the ":before -> content". It should capitalize the content of the "h2" but not the "h2:before"-content (specified in the CSS). Reproducible: Always Steps to Reproduce: 1. Make a standard HTML and CSS file, link them together 2. Add a h1 or h2 tag ("the tag") in the HTML file, or any tag that supports the :before pseudo element in CSS 3. Type in lowercase text in the tag you wrote above 4. Change the CSS property of that tag to: "text-transform: capitalize;" 5. Add a new CSS property for that tag and append ":before" so you will select the style preceding the tag 6. Add "content: 'm';" in that property (notice the lowercase "m" here) 7. Load the HTML file in Firefox and see how the lowercase "m" is being capitalized instead of the content inside the tag Expected Results: The ":before"-content style should not be initially capitalized because if it needs to be, it should be specified as such in the "content: "";" because the content style contains only static information.
Created attachment 343953 [details] testcase following initial description. css specification tells: The :before and :after pseudo-elements inherit any inheritable properties from the element in the document tree to which they are attached. http://www.w3.org/TR/CSS2/generate.html#before-after-content See,
css specification tells: The :before and :after pseudo-elements inherit any inheritable properties from the element in the document tree to which they are attached. http://www.w3.org/TR/CSS2/generate.html#before-after-content So, as I understand it, behaviour is correct here: h2:before inherits text-transform property from h2 The way to do as you wish would be to use text-transform:none; on h2:before selector.
CSS 2.1 has the same sentence: http://www.w3.org/TR/CSS21/generate.html#before-after-content 'tetx-transform' is an inheritable property http://www.w3.org/TR/CSS21/text.html#propdef-text-transform > Inherited: yes The behaviour in the test case is indeed correct, and is what other browsers (Opera,WebKit/Safari) implement.