Question

I have a submit button which is simply marked up as this:

<input type='submit' name='foo' value='Continue ⇢' class='button' />

I would like to make the rightward dotted arrow a tad larger.

<input type='submit' name='foo' value='Continue <span class='makemeatadlarger'>⇢</span>' class='button' />

is obviously not working… Is there a simple way to do this (I am not interested in adding tons of outher divs/spans and preferable without having to use images)

UPDATE
Inspired by accepted answer below I came up with this:

html

<button type='submit' name='foo' value='Continue' class='button'>Continue</button>

css

.button:after  {
    content: ' ⇢';
    font-size: 220%;
    height: 26px;
    margin-top: -19px;  
    float: right;
}

example

And heres a live example over at jsfiddle

Answer 1

I don’t believe so because taking the span out takes it out of the button. The best way would be a button instead of an input like so: <button type="submit" name="foo" class="button">Continue <span class='makemeatadlarger'>⇢</span></button>