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>
以下为我工作。
<style>
#submitYourConcern
{
color: #4b92db!important;
text-align: right;
}
#submitYourConcern:before{
content: url(/_layouts/images/grey_arrow.png);
padding-right: 5px;
}
</style>
创建另一个div把它放在关注DIV,背景设置为箭头,对齐其中u想要它。 或之前使用::添加东西前 或者使用::添加的东西到后面
可以使用::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
当使用'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>
我认为你可以使用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
如果你想它的另一面。
我看不出没有理由不让链接的箭头部分;作为一个用户,我会直觉地期望成为这种情况。 – Blazemonger