自己做的按钮怎么放到html,html – 我如何使用:: 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-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;

}

Next

…但是如果我尝试使用::之后它就会失效.这是我尝试过的方式：

.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;

}

Next

我已经摆弄了一段时间,显然我并不完全明白如何使用:: after.如何使用:: after而不是创建一个单独的div来完成我的第一个代码段中的按钮外观？