javascript - 悬停时使 "▶ "出现在链接之前？

Question

这是我的 fiddle.
当我将鼠标悬停在链接上时，如何使像“▶”这样的特殊字符出现在链接之前，例如选择箭头，是否可以使用外部图像代替？
这如何在 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); }