Drawing an arrow in css - css

Question

I need to draw an arrow, preferably using pseudo (:after or :before) elements. it is supposed to look like this:
But it looks like this:
This is my code:
HTML:
<div class="info">
<p>Learn about our technology<span class="arrow-right"></p></span></div>
CSS:
.arrow-right:after{
content: "";
display:inline-block!important;
width:0;
height:0;
border-left:14px solid #C8A962;
border-top:14px solid transparent;
border-bottom: 14px solid transparent;
}

Answer 1

Well of course it looks like that because you use a code just for the triangle part of the arrow.
You need to add the other part also. You can do that with the other pseudo-element before.
You can change and adjust 'width' 'height' 'color' and so on.
.arrow-right:after {
content: "";
display: inline-block !important;
width: 0;
height: 0;
border-left: 8px solid #C8A962;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
vertical-align: middle;
}
.arrow-right:before {
width: 20px;
height: 2px;
background: #C8A962;
content: "";
display: inline-block;
vertical-align: middle;
}
<div class="info"><a href="http://www.bay42.io" class="arrow1">
Learn about our technology<span class="arrow-right"></span>
</a></div>

Answer 2

You can try using arrow html code &#8594 for this purpose
<div class="info">
<p>Learn about our technology<span>→</span><p></p></div>

Answer 3

Looks like my comment got lost
You can use the character → . See : https://dev.w3.org/html5/html-author/charref you'll find the character entities that you need. for a pseudo, use content:"\2192"; + font-size to scale it
.arrow1::after {
content: '\2192';
/* little make up */
font-size: 2em;
/* whatever needed*/
padding: 0 0.5em;
/* whatever needed*/
vertical-align: -0.1em;
/* whatever needed*/
}
a {
text-decoration: none;
float:left;
clear:both
}
.arrow1:nth-child(2)::after {
content: '\21fe';
display:inline-block;
transform:scale(2,1);
}
.arrow1:nth-child(3)::after {
content: '\21d2';
display:inline-block;
transform:scale(2,0.8);
}
Learn about our technology
Another one stretched
or that one can be used and stretched too

Answer 4

p {
position: relative;
width: max-content;
}
.arrow-right:after {
top: 50%;
right: -50px;
position: absolute;
content: "";
display: inline-block !important;
width: 0;
height: 0;
border-left: 14px solid black;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
transform: translateY(-50%) scale(0.4);
}
.arrow-right:before {
content: "";
width: 25px;
height: 1px;
background: black;
position: absolute;
top: 50%;
right: -40px;
transform: translateY(-50%);
}
Try this. Change the colour to white.