Use pseudo-elements on replaced elements

If you want to use the :after or :before on replaced elements (e.g. img or input) you can use the following hack:

Enable the pseudo element for the img with an empty content property on the img itself:

img {
    content: '';
}

Add the pseudo element to the img:

img:after {
    content: 'Pseudo Content, Yeah';
}

Example

• Simple on jsfiddle
• Advanced on CodePen

Browser Support

• Chrome 10+
• Firefox 11+
• Opera 9.8+
• Safari

Further reading

• http://www.w3.org/TR/CSS21/conform.html#replaced-element
• http://www.w3.org/TR/css3-selectors/#gen-content