我的位置my :: after content始終位於<a>的內部末端？

Question

我有以下

HTML：

<div id='button'> 
    <a href=''>My Link</a> 
</div> 

CSS：

#button a { 
    display: block; 
    background-color:#FF0000; 
    width:250px; 
    text-align:center; 
} 

#button a::after { 
    content: " \25b6"; 
    color:#000000; 
} 

jsfiddle

現在，你可以從的jsfiddle鏈接看到我有一個黑色的在文本結尾的三角形我的<a>但我想要的是它在<a>（紅色內）的內部結束，所以如果盒子重新調整大小的三角形將隨着結束而移動，理想地是爲了它垂直對齊到中間爲multiple lines

我已經嘗試應用an ::after to the div和應用樣式to the <div> instead of the <a>無濟於事，所以我想知道我在這裏失蹤。

Answer 1

如果您想箭頭姿勢要正確，你需要沿着這些線路做一些事情：

.container { 
    position: relative; 
} 

.container::after { 
    content: "\25B6"; 
    position: absolute; 
    top: 50%; right: 0; 
    transform: translateY(-50%); 
} 

這將鎖定元件到容器的右邊（right:0），和將其從容器頂部向下放置一半（top:50%）。然後，我們將元素垂直移回，距離等於其自身高度的一半（transform:translateY(-50%)）。

最終結果可以在這裏看到：http://jsfiddle.net/mdn7byfc/5/