悬停时在链接前显示"▶"？

Question

继承我的小提琴.
当我将鼠标悬停在链接之前时,如何在链接之前显示一个像"▶"这样的特殊字符,如选择箭头,是否可以使用外部图像？
怎么能在css或javascript？

#wrapper {width:400px;font-family:questrial;clear:both;}
#first {width:130px;float:left;}

#wrapper a:hover {
    box-shadow:0px 15px #E81029 inset, 0px -15px #E81029 inset;
    background:#e5122e;
    color:#f6f6f6;
    padding:2px;
    transition-duration:0s;
    padding-left:4px;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    transition: all .2s ease-out;
    }
    
.category2 {width:430px;padding:5px;margin-bottom:40px;background:white;
box-shadow:0px 3px 10px rgba(0,0,0,.15)}

.desc3 {color:#666666;font-family:questrial;font-size:9px;width:350px;text-align:left;}

<div class="category2" style="line-height:150%;"><center>
        <div class="desc3">
<div id="wrapper">
    
<div id="first">
<br><a href="/">Text is here</a>
<br><a href="/">Text is here</a>
<br><a href="/">Text is here</a>
<br><a href="/">Text is here</a>
<br><a href="/">Text is here</a>
<br><a href="/">Text is here</a>
</div>

    
<div id="third">
<br><a href="/">Text is here</a>
<br><a href="/">Text is here</a>
<br><a href="/">Text is here</a>
<br><a href="/">Text is here</a>
<br><a href="/">Text is here</a>  
<br><a href="/">Text is here</a>   
</div>
    
</div>

</div>

Answer 1

您可以:

#wrapper a:hover:before { content: '?'; }

或图像:

#wrapper a:hover:before { content: url(http://xxx); }

Answer 2

您可能会有一些混蛋,可以避免使用visibility.

a:hover:before {
  content: '?';
  display: inline-block;
}

<a href="#">Hover Me</a>

使用visibility以下方法避免抽搐位:

a:before {
  content: '?';
  visibility: hidden;
}

a:hover:before {
  display: inline-block;
  visibility: visible;
}

<a href="#">Hover Me</a>

对于图像相同的事情,您可以使用url():

a:before {
  content: url("https://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/delete_16x16.gif");
  visibility: hidden;
}

a:hover:before {
  display: inline-block;
  visibility: visible;
}

<a href="#">Hover Me</a>

OP的最终答案不影响<a>:

a, span:before {
  color: #00f;
}

span:before {
  content: '?';
  visibility: hidden;
  margin-right: 3px;
}

span:hover:before {
  display: inline-block;
  visibility: visible;
}

<span><a href="#">Hover Me</a></span>