我會如何使用::在我的按鈕上製作箭頭？

Question

我可以像這樣在右側箭頭創建按鈕：

.next-button { 
 
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; 
 
    text-decoration: none; 
 
    color: #fff; 
 
    text-align: center; 
 
    border: none; 
 
    background-color: #2399e5; 
 
    display: inline-block; 
 
    height: 36px; 
 
    line-height: 36px; 
 
    padding: 0 1rem; 
 
} 
 

 
.next-point{ 
 
    vertical-align: top; 
 
    width: 0; 
 
    height: 0; 
 
    display: inline-block; 
 
    border-top: 18px solid transparent; 
 
    border-bottom: 18px solid transparent; 
 
    
 
    border-left: 18px solid #2399e5; 
 
    border-right: 18px solid transparent; 
 
}

<div> 
 
<button class="next-button" type="button">Next</button><div class="next-point"></div> 
 
</div>

...但如果我嘗試做它用::後它只是不工作出。以下是我已經試過了：

.next-button { 
 
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; 
 
    text-decoration: none; 
 
    color: #fff; 
 
    text-align: center; 
 
    border: none; 
 
    background-color: #2399e5; 
 
    display: inline-block; 
 
    height: 36px; 
 
    line-height: 36px; 
 
    padding: 0 1rem; 
 
} 
 

 
.next-button::after{ 
 
    content: " "; 
 
    vertical-align: top; 
 
    width: 0; 
 
    height: 0; 
 
    display: inline-block; 
 
    border-top: 18px solid transparent; 
 
    border-bottom: 18px solid transparent; 
 
    
 
    border-left: 18px solid #2399e5; 
 
    border-right: 18px solid transparent; 
 
}

<div> 
 
<button class="next-button" type="button">Next</button> 
 
</div>

我這個周圍騙得了好一會兒，並明確我不完全瞭解如何使用::after。我如何使用::after來完成我的第一個片段中的按鈕外觀，而不是創建單獨的div？

Answer 1

僞元素是.next-button元素的子元素，所以它顯示在按鈕內部。您可以使用絕對位置在按鈕外部顯示它，並且right等於減去僞元素寬度（width = 36px - > right = -36px）。

.next-button { 
 
    position: relative; 
 
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; 
 
    text-decoration: none; 
 
    color: #fff; 
 
    text-align: center; 
 
    border: none; 
 
    background-color: #2399e5; 
 
    display: inline-block; 
 
    height: 36px; 
 
    line-height: 36px; 
 
    padding: 0 1rem; 
 
} 
 

 
.next-button::after { 
 
    position: absolute; 
 
    content: ""; 
 
    top: 0; 
 
    right: -36px; 
 
    width: 0; 
 
    height: 0; 
 
    display: inline-block; 
 
    border-top: 18px solid transparent; 
 
    border-bottom: 18px solid transparent; 
 
    border-left: 18px solid #2399e5; 
 
    border-right: 18px solid transparent; 
 
}

<div> 
 
    <button class="next-button" type="button">Next</button> 
 
</div>

另一種選擇是絕對位置的元素向右內，並使用translateX(100%)向外面推。

.next-button { 
 
    position: relative; 
 
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; 
 
    text-decoration: none; 
 
    color: #fff; 
 
    text-align: center; 
 
    border: none; 
 
    background-color: #2399e5; 
 
    display: inline-block; 
 
    height: 36px; 
 
    line-height: 36px; 
 
    padding: 0 1rem; 
 
} 
 

 
.next-button::after { 
 
    position: absolute; 
 
    content: ""; 
 
    top: 0; 
 
    right: 0; 
 
    transform: translateX(100%); 
 
    width: 0; 
 
    height: 0; 
 
    display: inline-block; 
 
    border-top: 18px solid transparent; 
 
    border-bottom: 18px solid transparent; 
 
    border-left: 18px solid #2399e5; 
 
    border-right: 18px solid transparent; 
 
}

<div> 
 
    <button class="next-button" type="button">Next</button> 
 
</div>