定位CSS：在内容之后

Question

我试图制作一个内部居中的字符的圆形按钮（在这种情况下，下一个按钮的右箭头）。我通过调整元素的线高来使它垂直居中，但我无法找到将其移到一边的方法。

我尝试添加文字和unicode（\ 0020）空格字符，并且根本没有移动三角形。填充和边距不适用于：选择器后，如果应用于元素本身，则不会产生预期的效果。

在这里“呈现”＆＃39;代码，根据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>

以下是渲染的内容：

Answer 1

这将有效：

.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/