Comments on: Add Progressive Icons to Your Site Using :after pseudo-element

By: CodeMyConcept

CodeMyConcept — Mon, 14 Mar 2011 16:39:15 +0000

Great way of explaining it! People understand better by watching the process.

By: Andrew Houle

Andrew Houle — Fri, 23 Oct 2009 11:29:35 +0000

@Mats – I haven’t tested your code out, but because of the background color associated with the link (a) target I believe that is being applied to the image as well. You could try using a background image instead of the pseudo-selector in this case.

By: Mats

Mats — Fri, 23 Oct 2009 06:13:20 +0000

Hi Andrew,

I’m new with css so it might be something easy? This is what I have in the css file;

a[href$='.mp3']:before {
content: url(file.png);
margin-left: 3px;
}

And this is the behavior for the a

.h3_content{
font-size: 1.03em;
font-weight: normal;
letter-spacing: 0.25px;
line-height: 1.2;
}
.h3_content a{
font-weight: bold;
font-size: 1.03em;
text-decoration: underline;
background-color: #000000;
color: #ffffff;

By: Andrew Houle

Andrew Houle — Thu, 22 Oct 2009 23:29:45 +0000

@Mats – You should be able to target your text and not the image. What is your code?

By: Mats

Mats — Thu, 22 Oct 2009 16:11:44 +0000

Hi,

I have something interesting going on… At least for me! The text which is the link on what I’m playing with has a background color, this background color is also applied behind this image. Is is possible to somehow make sure that the background color is only behind the text?

By: Rob W

Rob W — Wed, 02 Sep 2009 18:16:10 +0000

Love this tutorial but I can’t get the IE fix to work in 7. I noticed that you are using this technique on this very page … when I loaded this page in IE it doesn’t show the icons either. I don’t believe the IE fix actually works?

By: Ian W. Parker

Ian W. Parker — Fri, 07 Aug 2009 14:17:36 +0000

@AbhiTechBlog: The following code would work for external links:

.ext:after {
content: url(images/icons/link.png);
margin-left: 2px;
}

Then just assign class=”ext” to your external links.

By: Garrett Winder

Garrett Winder — Fri, 07 Aug 2009 13:47:40 +0000

Great article – I’ve been nerding for years and didn’t come across this little gem until about a month ago. Love this stuff. Good job!
.-= Garrett Winder´s last blog ..An update from your local nerdatorium. =-.

By: Eric Roberts

Eric Roberts — Fri, 07 Aug 2009 08:33:35 +0000

@Andrew – as Rounin just reaffirmed, I specifically mentioned Internet Explorer 6, not IE as a whole. IE6 simply has no support for CSS attribute selectors ([href$='.pdf'], etc).

Rounin’s slight HTML “hack” can also work but will require additional markup. Using Javascript is my recommended solution, since you won’t be required to use a conditional background image for any IE (although you still may need some tweaking to get the images to show up exactly where you want – margins and padding can be finicky).
.-= Eric Roberts´s last blog ..From our Portfolio: SecretTweet =-.

By: Rounin

Rounin — Tue, 04 Aug 2009 20:20:45 +0000

A good but slightly ugly fix for IE6 would be to use the following to the IE CSS.

a.pdf span {
background:transparent url(../images/pdf.png) no-repeat center right;
padding: 0 20px 0 0;
}

Then in the HTML add a span tag around the last word inside the anchor tag. This will also allow the icon to wrap with the text.

Using “white-space:nowrap” will break many pages (e.g. floats), especially if the anchor tag is very long.