How to add image on hover in <li>::after - html

Question

I want a structure like this on <li> hover (Blue down arrow on center of every li)
But I'm unable to make this because i thought i will use this blue image as pseudo elements ::after but i have added ":" in between two <li>.
This is my html code :
<div class="quick-links col-md-12">
<p class="left" style="font-weight:600;font-family:calibri;">Go quickly
to</p>
<i class="fa fa-arrow-circle-right" style="color:#2ca5fa;padding:0px 3px 0px 12px;"></i>
<ul class="quick-ul">
<li>Mobiles</li>
<li>Sports</li>
<li>Tablets</li>
<li>Bath Towels</li>
<li>LED Bulbs</li>
<li>TV</li>
<li>Washing Machines</li>
<li>Laptops</li>
<li>Headphones</li>
<li>Fans</li>
<li>Travel</li>
<li>Books</li>
</ul>
</div>
This is my CSS code :
.quick-links {
height: 52px;
background-color: white;
margin-top: 20px;
display: inline-table;
padding-top: 13px;
border-top: 4px solid #0096ff;
}
.left {
float: left;
}
.quick-ul {
float: right;
display: inline-flex;
}
.quick-ul li {
font-family: calibri;
padding-right: 39px;
position: relative;
margin-left: -34px;
font-size: 15px;
}
.quick-ul li>a {
color: black;
}
.quick-ul li>a:hover {
color: #0096ff;
}
.quick-ul li::after {
content: ":";
color: black;
padding-left: 10px;
padding-right: 10px;
font-weight: 100 !important;
}
.quick-ul li:nth-last-child(1)::after{
content: "";
}
Any Kind of help would be highly appreciated.

Answer 1

All you need is this rule
.quick-ul li>a:hover::after
content: "\25bc";
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, -100%) scaleX(2);
color: #0096ff;
font-size: 20px;
}
It will add a filled arrow character using the pseudo ::after, that is easily colored and sized as any other character. The translate moves it into place and the scaleX makes it a little wider.
Stack snippet
.quick-links {
height: 52px;
background-color: white;
margin-top: 20px;
display: inline-table;
border-top: 4px solid #0096ff;
}
.left {
float: left;
}
.quick-ul {
float: right;
display: inline-flex;
list-style: none; /* added property */
}
.quick-ul li {
font-family: calibri;
padding-right: 39px;
position: relative;
margin-left: -34px;
font-size: 15px;
}
.quick-ul li>a {
color: black;
}
.quick-ul li>a:hover {
position: relative; /* added property */
color: #0096ff;
}
.quick-ul li>a:hover::after { /* added rule */
content: "\25bc";
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, -100%) scaleX(2);
color: #0096ff;
font-size: 20px;
}
.quick-ul li::after {
content: ":";
color: black;
padding-left: 10px;
padding-right: 10px;
font-weight: 100 !important;
}
.quick-ul li:nth-last-child(1)::after {
content: "";
}
<div class="quick-links col-md-12">
<p class="left" style="font-weight:600;font-family:calibri;">Go quickly to
</p>
<i class="fa fa-arrow-circle-right" style="color:#2ca5fa;padding:0px 3px 0px 12px;"></i>
<ul class="quick-ul">
<li>Mobiles</li>
<li>Sports</li>
<li>Tablets</li>
<li>Bath Towels</li>
<li>LED Bulbs</li>
<li>TV</li>
</ul>
</div>

Answer 2

Try this.
.quick-links {
height: 52px;
background-color: white;
margin-top: 20px;
display: inline-table;
padding-top: 0;
border-top: 4px solid #0096ff;
}
.left {
float: left;
}
.quick-ul {
list-style: none;
float: right;
display: inline-flex;
}
.quick-ul li {
font-family: calibri;
font-size: 15px;
position: relative;
}
.quick-ul li>a {
color: black;
position: relative;
}
.quick-ul li>a:hover {
color: #0096ff;
}
.quick-ul li::after {
content: ":";
color: black;
padding-left: 10px;
padding-right: 10px;
font-weight: 100 !important;
}
.quick-ul li:nth-last-child(1)::after {
content: "";
}
/* additional styles */
.quick-ul li a::before {
content: "";
position: absolute;
top: -17px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
border-top: 10px solid #0096ff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
opacity: 0;
transition: all ease 0.15s;
}
.quick-ul li:hover a::before {
opacity: 1;
}
<div class="quick-links col-md-12">
<p class="left" style="font-weight:600;font-family:calibri;">Go quickly to
</p>
<i class="fa fa-arrow-circle-right" style="color:#2ca5fa;padding:0px 3px 0px 12px;"></i>
<ul class="quick-ul">
<li>Mobiles</li>
<li>Sports</li>
<li>Tablets</li>
<li>Bath Towels</li>
<li>LED Bulbs</li>
</ul>
</div>

Answer 3

This code should work for you:
.quick-links {
height: 52px;
background-color: white;
margin-top: 20px;
border-top: 4px solid #0096ff;
text-align: center;
padding: 0px !important;
}
.left {
float: left;
}
.quick-ul {
list-style: none;
display: flex;
justify-content: center;
margin: 0px;
box-sizing: border-box;
}
.quick-ul li {
position: relative;
font-family: Arial;
padding: 0px;
font-size: 15px;
margin: 0px 1px;
display: inline;
box-sizing: border-box;
}
.quick-ul li:not(:last-child)::before {
content: ":";
position: absolute;
top: 30%;
right: 0px;
height: 100%;
width: auto;
}
.quick-ul li>a {
display: block;
width: 100%;
height: 100%;
color: blue;
padding: 12px 18px 0px;
box-sizing: border-box;
position: relative;
}
.quick-ul li>a:hover {
color: #0096ff;
}
.quick-ul li > a::after {
display: block;
content: "";
color: blue;
padding-left: 10px;
padding-right: 10px;
font-weight: 100 !important;
transform: rotate(90deg);
transform: translateX(-50%) rotate(90deg);
margin-top: -5px;
font-size: 18px;
position: absolute;
top: 0px; left: 50%;
transition: all 0.3s ease-in-out;
}
.quick-ul li>a:hover::after {content: '\25B6'}
<div class="quick-links col-md-12">
<ul class="quick-ul">
<li>Mobiles</li>
<li>Sports</li>
<li>Tablets</li>
</ul>