Member Offer
  1. 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?

Discussion in 'Website Design Forum:' started by Kevin, Nov 14, 2010.

  1. Kevin

    Kevin 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>.
  2. 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.
  3. Kevin

    Kevin 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
  4. Mark Alexander

    Mark Alexander Senior Member

    Well technically:

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

    Harry 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.

Share This Page