I have searched extensively to find a solution for this issue, but I simply want to include a greater-than sign in my link when it is hovered over. I prefer not to use images or tables and so on. As someone more focused on backend development, I grasp the principles behind it, just struggle to implement them.
Below is the code snippet, although I am unsure if it will be of much assistance.
<ul>
<li><a href="#">About Us</a></li>
And here is the corresponding CSS:
li a:hover {
font-size: 12px;
text-transform: uppercase;
color: #FC3;
padding-left: 15px;
height: 1px;
width: 1px;
border: thin solid #fff;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
}
I understand the result may not look great, and dealing with CSS like a shotgun marriage was not part of my plan for today. Any guidance on how to achieve the desired outcome would be greatly appreciated.
In essence, I aim to have it display "About Us >" upon hover.