What is a good way to get the effects of :before and :after for input submit buttons?

Question

It seems browsers dislike the use of :before and :after for submit buttons in particular, which I'm guessing has something to do with click jacking prevention. However, it basically ruins a specific style I'm trying to achieve, and my alternatives to replicate the effect are poor.

How can I produce an effect similar to :before and :after for submit buttons without using scripts? I am able to generate additional elements (via. server scripts) for each occurrence of a submit button, if need be. Ideally not wrapper elements, but I could make those work.

Answer 1

Use a <button type="submit"> element so that you can add additional <span> elements within the button if you simply need more DOM nodes.

:before will also work on button elements.

Answer 2

You can use <span> or <div> elements.

Here are some examples of use with <span> on :

• <input type="text"/>
• <input type="submit"/>
• <button type="button">
• <button type="submit">

FIDDLE