CODEWITHSUNDEEP
htmlcsshide
MrDevel
MrDevel

Reputation: 168

How to hide content that is not wrapped by tag using only CSS?

I have the following html:

<a href="..."><span>ICON</span>Text</a>

How can I remove only the "Text" using CSS rules? NOTE: I need to continue to see the content.

Upvotes: 2

Views: 863

Answers (2)

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18113

Based on Paulie_D's answer, I came with a solution by using font-size:

a {
    font-size: 0;
}

a span {
    font-size: 16px;
}

DEMO

Based on the comments on this answer, I think this might be the solution. It isn't perfect, but will do. We use my answer with the font-size: 0. Like Paulie_D commented this won't work crossbrowser, some browser will show it in a font-size of 4px. For those browser we add Paulie_D's solution too:

a {
    font-size: 0;
    visibility:hidden;
}

a span {
    font-size: 16px;
    visibility:visible;
}

To see the difference between the two: check here.

Upvotes: 4

Paulie_D
Paulie_D

Reputation: 114991

You can use visibility for this

JSFiddle Demo

CSS

a {
    visibility:hidden;
}

a span {
    visibility:visible;
}

Upvotes: 6

Related Questions