:: before要素が右に揃えられました

Question

私はすでに:: after要素（下）を使用しているボタンを持っていますが、divの右側にシェイプ/要素を追加します。

a { 
 
    position: relative; 
 
    display: inline-block; 
 
    padding: 15px 10px; 
 
    margin: 0 5px; 
 
    color: #222; 
 
    font-size: 0.9em; 
 
    font-weight: 700; 
 
} 
 

 
a:after { 
 
    content: ""; 
 
    position: absolute; 
 
    display: inline-block; 
 
    background-color: #d11e5d; 
 
    margin: 0 auto; 
 
    height: 3px; 
 
    width: 0; 
 
    bottom: 6px; 
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
a.btn-contact::before { 
 
    background: #0c0; 
 
    content: ''; 
 
    display: inline-block; 
 
    float: left; 
 
    height: 10px; 
 
    width: 10px; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
}

<a href="" class="btn-contact">button</a>

私はリンクの右にそれを得たが、私は、垂直右

EDITに揃えるにそれをしたい：フルCSS/HTMLの提供。 .btn接触クラスでWordpressのサイトには、ちょうど1ボタン（私は横に形状をしたい1）

Answer 1

適用される私はあなたが（それはあなたが望むものだと推測）

を提供されたHTMLがfloatを使用していないビットを変更しました〜absolute要素。何の効果もありません。その:before幅半分の高さだ上に移動li a高さ（相対位置とアイテム）の半分ともtransform:translateY(-50%)を意味

使用top:50%。

真ん中の縦揃え一緒にこれらの2つのスタイルbefore擬似要素以下

チェックスニペットと、これはあなたが

li a { 
 
    position: relative; 
 
    display: inline-block; 
 
    padding: 15px 10px; 
 
    margin: 0 5px; 
 
    color: #222; 
 
    font-size: 0.9em; 
 
    font-weight: 700; 
 
} 
 
    
 
li a:after { 
 
    content: ""; 
 
    position: absolute; 
 
    display: inline-block; 
 
    background-color: #d11e5d; 
 
    margin: 0 auto; 
 
    height: 3px; 
 
    width: 0; 
 
    bottom: 6px; 
 
    left: 0; 
 
    right: 0; 
 
} 
 
    
 
li.btn-contact a::before { 
 
    background: #0c0; 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 10px; 
 
    width: 10px; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 50%; 
 
transform:translateY(-50%) 
 
}

<li class="btn-contact"><a href="">button</a></li>