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

链接文本右对齐。我想将箭头图像放在链接文本之前，但不希望图像被链接。我在帖子中列举了一个打印镜头的例子。CSS样式。在链接前放置一个箭头图像

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

来源

2017-04-04 Fuji - H2O

我看不出没有理由不让链接的箭头部分;作为一个用户，我会直觉地期望成为这种情况。 – Blazemonger

以下为我工作。

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

来源

2017-04-04 13:36:08

创建另一个div把它放在关注DIV，背景设置为箭头，对齐其中u想要它。或之前使用::添加东西前或者使用::添加的东西到后面

来源

2017-04-04 13:28:40

可以使用::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

来源

2017-04-04 13:28:47 Ryan

当使用'background-image'时，你需要设置'content：'“''并将'width'和'height'属性设置为图像的大小。 – sn3ll

或者，将'background-image'分配给':: before'。 – Blazemonger

@Blazemonger这就是我的意思 – Ryan

您可以使用::after/::before伪元素放置东西的元素。

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

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

来源

2017-04-04 13:31:57

我认为你可以使用content这样的：

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

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

或者使用::before而不是::after如果你想它的另一面。

来源

2017-04-04 13:36:34

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

回答

相关问题