悬停时让“▶”出现在 link 之前？

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

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>

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

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>

Answer 3

为此你可以使用 css:

a:before{
  content: '▶';
}

但在实践中，我遇到了很多 unicode 中不存在的图标，因此我建议使用 http://fontello.com/ 你可以选择很多图标并像 font-family 一样使用它："fontello"

悬停时让“▶”出现在 link 之前？

Making a " ▶ " to appear before a link when hover?

html

javascript

css

character

special-characters