I have a ul with li items in it which i have styled:
<ul class="techlist tech">
<li>
<a target="_blank" href="#link1">
<i class="red far fa-file"></i>content block 1
</a>
</li>
<li>
<a target="_blank" href="#link2">
<i class="red far fa-file"></i>content block 2
</a>
</li>
<li>
<a target="_blank" href="#link3">
<i class="red far fa-file"></i>content block 3.
</a>
</li>
</ul>
I want to add arrow using an html entity to the end and i did this:
ul.techlist a {
border: 1px solid black;
padding: 15px;
margin: 20px 0;
display: block;
color: black;
text-decoration: none;
}
ul.techlist a::after {
content: '\0203A';
color: #e6190f;
float: right;
display: inline-block;
font-size: 2em;
font-weight: bold;
font-family: arial;
}
The problem is that it when this loads my chevron (0203A enity in css above) loads in the bottom right of the li:a. I'm trying to figure out how to load it to the center vertically but stay on the right.
I've thought about adding the icon as a span if that would work but I'm not much of a css expert here so I may be barking up the wrong tree.
This is a link to my page nodal2 . rudtek.com/resources/technology/
(spaces added around first ".")
this is picture of what I'm trying to do: