Removing content through css pseudo-classes?

Kevin

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

HTML:
<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
Code:
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>.
 
Could you not just apply a negatvie left margin to the span?

Surely the <b> or <i> would work if they were only stylistic and not for emphasis.
 
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:

HTML:
<h1>Kevin<span> </span><em>Dendievel</em></h1>

Code:
    h1 em {        color:#ff0000;    }    h1 span {        display:none;    }

But that's just terrible. :)
 
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.
 
Back
Top