Remove :after on img

HTML & CSS
1

Hello
I have a page layout that has an image wrapped in a link. Then below that is a simple text link.

I have set the css to add an arrow after the text link. But this is also applying to the img link. This content is added via a CMS and I’d like to avoid having to put a special class on the image to remove the arrow.

I’ve tried a few things to remove the arrow but can’t get it to work. Can anyone help?

My CSS is:

a:after {content: " \2192";}

Thanks

2

Hi,

Without adding a new class, the best you could probably do with CSS is to hide the arrow by shifting the img on top of it.
You would need to make sure it layers above the arrow by adding position:relative; to create a stacking context.

Something like this -


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">

div {
    width:60%;
    margin:0 auto;
    background:#EEF;
}
a:after {content: " \\2192";}
[COLOR=#0000ff]a img {
    position:relative;
    margin-right:-1.3em;
    vertical-align:text-bottom;/*hide any text-decoration*/
}[/COLOR]
</style>

</head>
<body>

<div>
    <p>Some random text with a <a href="#">link</a> in it.</p>
    <p>String of text with an image 
        <a href="#">
            <img src="http://www.css-lab.com/demos/vertical-center/images/image-35.gif" alt=""/>
        </a> nested in an anchor.
    </p>
    <p>Some random text with a <a href="#">link</a> in it.</p>
</div>

</body>
</html>
3

Hey Rayzur, thanks so much.
This does work, but unfortunately because I have text floated to the right of the image, it slides accross and is covered by the image when the negative margin is applied. So not sure I can use it.

My image does actually have a unique class. I tried to work it into the css to cancel out the :after content but couldn’t get it to work.
I tried:

a:after img {content"“;}
a img:after {content”";}

But no go. Do I have my selectors wrong?

Thanks.

4

Don’t forget the colon after “content”:

a:after img {content[COLOR="#FF0000"]:[/COLOR] "";}
a img:after {content[COLOR="#FF0000"]:[/COLOR] "";}
5

This does work, but unfortunately because I have text floated to the right of the image…

I was wondering about that, must be some sort of image caption text.
Can you give a link to the page or an example of the content that is nested in the anchor with the img?

My image does actually have a unique class. I tried to work it into the css to cancel out the :after content

As you know, the problem is not really the img. It’s the :after content applied to the anchor. CSS does not allow you to climb backwards up the dom like that. In other words, you can’t style the parent from the child, but you can style the child from the parent.

You can’t add the pseudo :after to an img element as it is what is known as an “empty” element. It self closes and it cannot contain any content.

EDIT:
It really sounds like you need to add a class to the anchors that have images nested in them or rely on javascript to climb backwards through the dom.

6

Thanks ralph, yup I did actually have the colon in my code, just left it out here in this thread.

But yes, either way it doesn’t work, as Rayzur said the dom won’t work magically like that.

But I’ve found a solution. I’ve wrapped the whole image link in with the heading tag, because it sits at the start of the heading anyway.
So my css is

h4 a:after {content: "";	}

And that works.

Not squeaky clean but does the trick…
Thank you both for your help.

7

That will work just fine :slight_smile: