create an arrow using css - css

Question

Is there any way to create an arrow like that in the following button, using CSS?
I know how to create triangle-like arrows like this
#triangle_arrow {
top: 3pt;
content: "";
display: inline-block;
width: 0.5em;
height: 0.5em;
border-right: 0.1em solid black;
border-top: 0.1em solid black;
transform: rotate(45deg);
}
but that line towards the arrow's corner is confusing me!

Answer 1

Fortunately for you, the → HTML entity exists, meaning you don't need to faff around with CSS triangles and instead can simply use content within a pseudo-element:
button {
background: #0898b8;
border: 1px solid #0898b8;
color: white;
line-height: 24px;
padding: 6px 12px;
}
span::after {
content: '→';
font-size: 18px;
margin-left: 4px;
}
<button>
<span>Next</span>
</button>

Answer 2

Already there is way through which you could achieve this i.e. suggested by James, but you could even do this using pseudo selectors or using pre-defined icons using font awesome to get an arrow icon next to some tag, as below.
Solution 1:
#box{
width:100px;
height:50px;
background:blue;
position:relative;
}
#box:before{
top: 20px;
right:10px;
content: "";
display: inline-block;
width: 0.5em;
height: 0.5em;
border-right: 0.1em solid white;
border-top: 0.1em solid white;
transform: rotate(45deg);
position:absolute;
}
#box > p:after{
content:'';
width:20px;
height:1px;
background:white;
right:10px;
top:24px;
position:absolute;
}
#box > p{
font-size:24px;
color:#fff;
padding:10px;
box-sizing:border-box;
}
<div id="box">
<p>Next</p>
</div>
Solution 2 :
#box{
width:100px;
height:50px;
background:blue;
position:relative;
}
#box > p{
font-size:24px;
color:#fff;
padding:10px;
box-sizing:border-box;
}
#box > p > .fa{
color:#fff;
font-size:16px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="box">
<p>Next <i class="fa fa-arrow-right"></i></p>
</div>

Answer 3

Resizeable CSS-only arrow.
https://codepen.io/ArtZ91/pen/jjbOvG
<div class="css-arrow top" style="width: 15px; height: 30px; zoom: 2;"></div>
.css-arrow {
position: relative;
zoom: 1;
&:before {
box-sizing: border-box;
content: "";
display: block;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 1px;
bottom: 0;
width: 1px;
background: #000;
zoom: 2;
}
&:after {
box-sizing: content-box;
content: "";
display: block;
position: absolute;
top: 0;
left: 50%;
width: 57%;
height: 0;
padding-bottom: 57%;
border: 1px solid #000;
border-width: 1px 0 0 1px;
transform: translate(0, 0) rotate(45deg);
transform-origin: 0% 0%;
border-radius: 0;
zoom: 2;
}
&.right {
transform: rotate(90deg);
}
&.bottom {
transform: rotate(180deg);
}
&.left {
transform: rotate(270deg);
}
}