为readmore下拉添加图像

Question

我想知道如何为此脚本添加下拉图片。

 <a onclick="showMoreOrLess(this,'restOfArticle');">+Sign In </a>
 <span id="restOfArticle" style="display:none"> </span>

脚本

<script>function showMoreOrLess(thisObj, bonusContent) {
var caption = thisObj.innerHTML;
//alert(caption);
if (caption == "+Sign In") {
    document.getElementById(bonusContent).style.display = "inline";
    thisObj.innerHTML = "-Sign In";
} else {
    document.getElementById(bonusContent).style.display = "none";
    thisObj.innerHTML = "+Sign In";
}
}
</script>

我想用小图片图标替换+和 - ，怎么做？

Answer 1

删除+或-标志。将一个类添加到锚点，然后使用:before伪选择器。

<强> HTML

<a class="icon-left" onclick="showMoreOrLess(this,'restOfArticle');">Sign In </a>

<强> CSS

.icon-left::before {
  content: url('Icon image URL here');
}