如何在<li> :: after后悬停时添加图像

Question

我希望在<li>悬停上有这样的结构（每个li的中心上的蓝色向下箭头）

但是我无法做到这一点，因为我以为我会将这个蓝色图像用作伪元素::after，但我在两个<li>之间添加了“：”。

这是我的HTML代码：

<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><a href="#">Mobiles</a></li>
            <li><a href="#">Sports</a></li>
            <li><a href="#">Tablets</a></li>
            <li><a href="#">Bath Towels</a></li>
            <li><a href="#">LED Bulbs</a></li>
            <li><a href="#">TV</a></li>
            <li><a href="#">Washing Machines</a></li>
            <li><a href="#">Laptops</a></li>
            <li><a href="#">Headphones</a></li>
            <li><a href="#">Fans</a></li>
            <li><a href="#">Travel</a></li>
            <li><a href="#">Books</a></li>
</ul>
</div>

这是我的CSS代码：

.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: ""; 
}

任何形式的帮助都将受到高度赞赏。

Answer 1

您需要的只是这条规则

.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;
}

它将使用伪::after添加一个填充的箭头字符，它很容易着色并且大小与任何其他字符一样大小。 translate将其移动到位，scaleX使其更宽。

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><a href="#">Mobiles</a></li>
      <li><a href="#">Sports</a></li>
      <li><a href="#">Tablets</a></li>
      <li><a href="#">Bath Towels</a></li>
      <li><a href="#">LED Bulbs</a></li>
      <li><a href="#">TV</a></li>
  </ul>
</div>

Answer 2

此代码适用于您：

＆＃13;

＆＃13;

.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'}

＆＃13;

<div class="quick-links col-md-12">
<ul class="quick-ul">
	<li><a href="#">Mobiles</a></li>
	<li><a href="#">Sports</a></li>
	<li><a href="#">Tablets</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

试试这个。

.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><a href="#">Mobiles</a></li>
    <li><a href="#">Sports</a></li>
    <li><a href="#">Tablets</a></li>
    <li><a href="#">Bath Towels</a></li>
    <li><a href="#">LED Bulbs</a></li>
  </ul>
</div>