CODEWITHSUNDEEP
htmlcss
Fuji - H2O
Fuji - H2O

Reputation: 387

CSS styling. Put a arrow image before a link

The link text is right aligned. I would like to place the arrow image before the link text but don't want image to be linked. I put a print-shot example in the post. 

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

enter image description here

Upvotes: 2

Views: 10760

Answers (5)

Hamza Abbad
Hamza Abbad

Reputation: 666

I think that you can use content like this :

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

Or use ::before instead of ::after if you want it in the other side.

Upvotes: 0

Fuji - H2O
Fuji - H2O

Reputation: 387

The following worked for me.

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

Upvotes: 0

Pradeep Korriya
Pradeep Korriya

Reputation: 21

You can use ::after/::before pseudo element to place things an element.

#submitYourConcern::before {
    content: ">";
    display:inline-block;
}
<div id="submitYourConcern">
    <a href="/submit.aspx">Submit Your Concern</a>
</div>

Upvotes: 0

user7768059
user7768059

Reputation:

Create another div, put it in the concern div, set the background as the arrow, and align it where u want it. Or use ::before for adding stuff to the front Or use ::after for adding stuff to the back

Upvotes: 0

Ryan
Ryan

Reputation: 1226

You can use ::before to place things before an element.

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

If you want to use an image, you can use background-image

Upvotes: 1

Related Questions