How would I use ::after to make an arrow on my button? - html

Question

I can create a button with an arrow on the right side like this:
.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>
...but if I try to do it using ::after it just doesn't work out. Here's how I've tried that:
.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>
I've fiddled around with this for a good while and clearly I don't fully understand how to use ::after. How would I accomplish the button look in my first snippet using ::after instead of creating a separate div?

Answer 1

The pseudo element is a child of the .next-button element, so it's displayed inside the button. You can display it outside the button using absolute position, and a right equal to minus the pseudo element width (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>
Another options is to position absolutely inside the element to the right, and use translateX(100%) to to push it outside.
.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>

Answer 2

A much more elegant solution would be something alone those lines:
.arrow-clip{
clip-path: polygon(0% 0%, 80% 0, 100% 50%, 80% 100%, 0% 100%);
background-color: #2399e5;
color: #fff;
padding: 0.2rem 2rem;
border: 0px;
}
<button class="arrow-clip">Next</button>
If you would like to adjust the curves of your arrow you could google a simple clip generator, I think this one is nice.