How can I "display:none" to some adjacent text with CSS?

Question

The code I need to work on looks like this:

    <p>
    <a href="http://foo.com/foo.html"></a>
    <a href="http://creativecommons.org/publicdomain/mark/1.0/" rel="license">
    <img alt="Public Domain Mark" src="http://i.creativecommons.org/p/mark/1.0/88x31.png" style=""></a>
    <br> This work is free of known copyright restrictions... 
    </p>

It displays an image and then some text after the image. I need neither to display.

This works fine to get rid of the image:

a[rel="license"] {display:none;}

However, I need a way to get rid of the text after the <br> (and its unclosed tag if possible) and can't lose the closing </p> tag.

I am grabbing the HTML from a remote site and have no control over the markup there.

Thanks in advance for your help!

Answer 1

There's no way to hide this text using CSS, without adding a tag aground it- depending on how you're grabbing the site, your best bet would be to attempt to find "This work is free of known copyright restrictions..." and replace it with the same text surrounded by <span></span>; or simply deleting it altogether.

Answer 2

I realize this is an old question, but I found it interesting. I'm wondering if it wouldn't work to fiddle with the box model of the <p> tag, so that you hide what you want to "get rid of", even though it's still there?

For instance, say I wanted to display the image, but not the non-element text following. (I realize you want to eliminate the image as well, but for demonstration purposes having some visible content inside the <p> is helpful.) Since I know the image is 31px tall, I might just go with something like:

p {
    height: 31px;
    overflow: hidden;
}

Et voilà. Whether or not that would work for your specific need, I feel like we don't have enough context to determine. What you're asking for is to be left with an empty paragraph containing an invisible link, which absent larger context has no obvious purpose.

Come to think of it, though… if I then wanted to also hide the image, I'd just use a slight modification of your style above, and append:

a[rel="license"] { visibility: hidden; }

(You don't want to use display: none, as that will affect the dimensions of the <p> CSS box.)

This certainly has unfortunate implications for screen readers and the like, but for certain quick-and-dirty display needs it might suffice.