Positioning CSS :after content

Question

I'm trying to make a circular button with a character centered inside (in this case, a right-pointing arrow for a next button). I've gotten it vertically centered by adjusting the element's line-height, but I can't find a way to move it over to the side.

I tried adding both literal and unicode (\0020) space characters and that didn't move the triangle at all. Padding and margin don't work on the :after selector, and don't have the desired effect if applied to the element itself.

Here's the 'rendered' code, according to firebug (I'm using SASS, so pasting the actual code would leave out all the mixin definitions and such).

.flowbar--nav-image__next:after {
    content: "▸";
}
.flowbar--nav-image:after {
    color: white;
    font-size: 19px;
}
.flowbar--nav-image {
    background-color: #018FD6;
    background-image: -moz-linear-gradient(center top , #93E3F7, #018FD6);
    border-radius: 50% 50% 50% 50%;
    display: inline-block;
    height: 25px;
    line-height: 25px;
    width: 25px;
}

And the actual HTML:

<span class="flowbar--nav-image flowbar--nav-image__next"></span>

And here's what gets rendered:

Answer 1

This will work:

.flowbar--nav-image__next:after {
    content: "▸";
    display:block;
    margin-left:10px;
}

http://jsfiddle.net/qTXFJ/1/

Or, instead, you could simply adjust the text alignment, which means you don't have to figure out the pixels yourself:

.flowbar--nav-image {
    text-align:center;
}

http://jsfiddle.net/qTXFJ/3/