css - 定位 CSS :after content

Question

我正在尝试制作一个圆形按钮，里面有一个字符居中(在本例中，是指向下一个按钮的右向箭头)。我通过调整元素的行高使其垂直居中，但我找不到将其移到一边的方法。

我尝试添加文字和 unicode (\0020) 空格字符，但根本没有移动三 Angular 形。填充和边距不适用于 :after 选择器，如果应用于元素本身则不会产生预期的效果。

这是根据 firebug 的“呈现”代码(我使用的是 SASS，因此粘贴实际代码会遗漏所有混合定义等)。

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