• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Removing content through css pseudo-classes?


Senior Member
I know you can add content via css, but what about removing it?

<h1>Kevin <span>Dendievel</span></h1>
Sans-style it should just show up with a space in between.
But with css active, I would rather take out the space, and change the color of the text inside the span.

Something along the lines of
h1 span {color:#ff0000;}h1 span:before {content:--" ";
Possible or not?

Also, what is your point of view on swapping out the span for a <b> or <i> tag? It is after all a pure stylistic tag, why not use it? It's shorter than <span>.


Senior Member
I did think of that, and it works fine for my current project.
But I was now thinking of the worst-case scenario in which the font might not be available, or the font-size being adjusted by the user (sizing the margin in em would fix this though).

Also just for future reference; although I can't really think of any other uses for this 'feature' from the top of my head, it could never hurt to have it :p
Well technically:

<h1>Kevin<span> </span><em>Dendievel</em></h1>
    h1 em {        color:#ff0000;    }    h1 span {        display:none;    }
But that's just terrible. :)


Senior Member
Stick with a span for styling and remove the space with word-spacing.

Further to this, any content I wish to remove from view but keep in the flow I use a generic class="accessibility". See the logo on my site for an example.

This method is better than display:none; as it keeps the content visible (i.e. still available to screen-readers) but merely hides it way off of the left of the screen.