Adding an icon to a site link using attribute selectors
I know how to link to .pdfs and whatnot, but I'm not sure how to link to the site.
<p><a href="http://www.google.com" target="_blank">Google</a></p>
CSS
a[href$="http://www.google.edu"] <!--Don't know what to put here.--> {
background-image: url('pdficon_small.png') no-repeat center left;
padding-left: 25px;
background-size: auto 100%;}
+3
source to share
2 answers
For links with pdf files, you can simply add this to your css file (you can replace the image with your own image):
a[href$="pdf"]{
background-image: url('http://www.mgsdist.com/img/pdf_icon.png') no-repeat center left;
padding-left: 25px;
background-size: auto 100%;}
Your code contains something like this:
<a href="http://example.com/pdf.pdf">pdf download</a>
+4
source to share
You can use it like this:
This will be exactly the href http://www.google.edu
:
a[href="http://www.google.edu"]{
background-image: url('pdficon_small.png') no-repeat center left;
padding-left: 25px;
background-size: auto 100%;}
This will match any href starting with http://
:
a[href^="http://"]{
background-image: url('pdficon_small.png') no-repeat center left;
padding-left: 25px;
background-size: auto 100%;}
This will be installed for all links whose extension is pdf:
a[href$="pdf"]{
background-image: url('pdficon_small.png') no-repeat center left;
padding-left: 25px;
background-size: auto 100%;}
This will contain the href value google
:
a[href*="google"]{
background-image: url('pdficon_small.png') no-repeat center left;
padding-left: 25px;
background-size: auto 100%;}
0
source to share