CODEWITHSUNDEEP
htmlcss
Amen Ra
Amen Ra

Reputation: 2861

How do I insert content after text in an html element using CSS?

I am having a problem inserting text on an anchor element that has an href attribute: 

<a href="myfile.pdf"> Contact Us</a>

I am trying to write the css to make the icons appear after Contact Us and any text within any anchor tag:

a[href$=".pdf"]:after { 
width: 16px;
height: 16px;
content: url('/_assets/img/document-type-icons-2.png') no-repeat -84% 0;
}

It is not working like this. How can I write my css to make this happen?

Ok I got it working but how do I style the background properties such as no repeat and -84% 0.

It keeps repeating

Upvotes: 0

Views: 335

Answers (2)

Artin Falahi
Artin Falahi

Reputation: 1151

Content accepts only text. for special charter like space you must use hex format. I change it like follow and worked. but for increase width, repeat space hex(\00a0).

a[href$=".pdf"]:after {
background: url('http://cdn1.iconfinder.com/data/icons/fatcow/32x32/file_extension_pdf.png') ;
width: 40px;
height: 40px;
content: "\00a0\00a0\00a0\00a0\00a0"
}

Upvotes: 1

Marat Tanalin
Marat Tanalin

Reputation: 14123

Either set image as background-image for your :after pseudoelement or remove anything except url(path) from content property. content should contain either a string (or strings) or url of image wrapped in url() function (and then image will be inserted like a real IMG element).

Take into account that, to make generated pseudoelement visible (if you will use background-image instead of content: url(path)), content property should contain at least empty string ("") anyway.

Upvotes: 1

Related Questions