css - 定位CSS:内容后

我正在尝试制作一个以字符为中心的圆形按钮（在这种情况下，下一个按钮的向右箭头）。我已经通过调整元素的线高使其垂直居中，但是我找不到将其移到侧面的方法。

我尝试同时添加文字和Unicode（\ 0020）空格字符，但根本没有移动三角形。填充和边距在：after选择器上不起作用，如果应用于元素本身，则效果不理想。

根据firebug，这是“渲染”代码（我使用的是SASS，因此粘贴实际代码将忽略所有mixin定义等）。

.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;
}

和实际的HTML：

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

这是呈现的内容：

最佳答案

这将起作用：

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

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

或者，您可以简单地调整文本的对齐方式，这意味着您不必自己计算像素：

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

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