Question

继承我的fiddle.
如何制作这样的特殊角色＆＃34;▶＆＃34;当我将鼠标悬停在链接上时显示在链接之前，如选择箭头，是否可以使用外部图像？
如何在css或javascript？

中完成此操作

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

Answer 3

为此你可以使用css：

a:before{
  content: '▶';
}

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

制作＆＃34; ▶＆＃34;在悬停时出现在链接之前？

3 个答案: