我可以像这样创建一个右侧带有箭头的按钮:
.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>
...但是如果我尝试使用::after 来完成它,它就不会成功。以下是我的尝试:
.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 来完成我的第一个代码片段中的按钮外观?
最佳答案
伪元素是 .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>
关于html - 我将如何使用::after 在我的按钮上制作箭头?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45492916/