定位CSS：在內容後

Question

我正在嘗試製作一個圓形按鈕，其中心內置一個字符（在這種情況下，右下箭頭指向下一個按鈕）。我通過調整元素的行高來使它垂直居中，但是我找不到將它移到一邊的方法。

我試着添加文字和unicode（\ 0020）空格字符，並沒有移動三角形。填充和邊距在選擇器之後不起作用，如果應用於元素本身，則不具有所需的效果。根據螢火蟲（我使用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/