::之前元素對齊到右邊

-2

我有一個按鈕已經使用:: 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>

我就到了鏈接的權利，但我希望它右邊

編輯垂直對齊：提供完整的CSS/HTML。 WordPress網站與.btn接觸類適用於只是一個按鈕（一個我想旁邊的形狀）

來源

2017-05-04 user3550879

你可以發佈你的HTML/CSS的其餘部分，所以我們可以看到你目前的工作？ –

爲了正確回答您的問題，我們需要這兩個元素的HTML組成，也是CSS。 –

我很抱歉，我更新了我的問題全文 – user3550879

我改變了一下你提供的HTML（猜測，這是你想要的）

不使用float到absolute元素。它沒有任何作用。

使用top:50%這意味着一半li a高度（與相對位置的項），並且還transform:translateY(-50%)其向上移動:before寬度的一半的它的高度的。

這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>

來源

2017-05-04 19:14:25

就是這樣，謝謝 – user3550879

::之前元素對齊到右邊

回答

相關問題