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

Answer 2

创建另一个div，将其放在关注div中，将背景设置为箭头，并将其对齐到您想要的位置。 或者使用::之前将东西添加到前面 或者使用:: after将内容添加到后面

Answer 3

您可以使用::after/::before伪元素来放置元素。

＆＃13;

＆＃13;

#submitYourConcern::before {
    content: ">";
    display:inline-block;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

以下对我有用。

<style>
#submitYourConcern
{
    color: #4b92db!important;
    text-align: right;
}
#submitYourConcern:before{
content: url(/_layouts/images/grey_arrow.png);
padding-right: 5px;
}
</style>

Answer 5

我认为您可以像这样使用content：

＆＃13;

＆＃13;

    #submitYourConcern {
      padding-right: 15px;
      color: #4b92db;
    }
    #submitYourConcern::after {
      content: url('http://i742.photobucket.com/albums/xx61/wendarra/Bullets/bullet_grey_arrow.png');
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果您想在另一方使用，请使用::before代替::after。