724369 - :after :before pseudo elements for input elements

Status: VERIFIED DUPLICATE of bug 241985

Description

[Aquila]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:10.0) Gecko/20100101 Firefox/10.0
Build ID: 20120129021758

Steps to reproduce:

I added the following style to an input button element:

input[type="button"]:after{content:" - after";}
input[type="button"]:before{content:"before - ";}


Actual results:

Nothing :(


Expected results:

I checked the specifications of the :after and :before pseudo elements on w3.org and they say:

"Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The 'content' property, in conjunction with these pseudo-elements, specifies what is inserted."

I know that the displayed text inside a button is the content of the "value" attribute and not a text node, but this is the "content" of the element, shouldn't it be possible to add custom text to this content with those pseudo classes?

Comment 2

[Boris Zbarsky [:bzbarsky, bz on IRC]]

> but this is the "content" of the element,

Not from the point of view of CSS.  The "content" is the actual kids of the element in the DOM.  You can add some to see how that renders (they don't render).