html - CSS 样式。在链接前放一个箭头图像

Question

链接文本右对齐。我想将箭头图像放在链接文本之前，但不想链接图像。我在帖子中放了一个打印照片的例子。

#submitYourConcern {
  background: url( '/_layouts/images/grey_arrow.png' ) no-repeat right;
  padding-right: 15px;
  color: #4b92db;
  text-align: right;
}

<div id="submitYourConcern">
  <a href="/submit.aspx">Submit Your Concern</a>
</div>

Answer 1

您可以使用 ::before 将内容放在元素之前。

#submitYourConcern
    {       
        background: url(/_layouts/images/grey_arrow.png) no-repeat right ;
        padding-right: 15px;
        color: #4b92db;
        text-align: right;
    }
#submitYourConcern::before {
    content: ">";
    display:inline-block;
}

<div id="submitYourConcern">
<a href="/submit.aspx">Submit Your Concern</a>
</div>

如果要使用图片，可以使用background-image