Grow your CSS skills. Land your dream job.

Hide Text Characters Around Elements

  • # May 7, 2013 at 10:52 am

    I have a need to target text characters that are being used as separators between list elements. I do not have access to the source but I can inject CSS overrides. If I can find a way to target those characters, I could easily hide them. Targeting them is where I am lost, though.

    I created an [example on Codepen](http://codepen.io/mackdoyle/pen/xrLIC “example on Codepen”) to explain the situation.

    # May 7, 2013 at 10:57 am

    Is this existing mark-up & you are trying to fix it?

    Not sure how you can target something that indeterminate without an id or class. This feels like, at best, something JS could do by targeting any characters between a close bracket `/>` and an open bracket `< ` but even that will run into problems.

    Frankly, I would just tear it all down and start again

    # May 7, 2013 at 11:51 am

    I’m with @Paulie_D on this one tear it down and start again is optimal.

    But, if you must: http://codepen.io/wmwood/pen/zsIik

    # May 7, 2013 at 11:51 am

    I know you can inject CSS code before and after certain elements, referenced here: http://css-tricks.com/css-content/

    Maybe there is something there to remove nodes? Other than that, I would have to agree with Paulie_D

    # May 7, 2013 at 11:51 am

    This works:

    ul {
    position: relative;
    left: -1000px;
    }
    li {
    position: relative;
    left: 1000px;
    }

    Maybe with overflow: hidden on parent element. Keep in mind though it’s not valid html so some browsers might do funky things and you’ll end up seeing the pipes anyway… maybe.

    # May 7, 2013 at 11:55 am

    >But, if you must: http://codepen.io/wmwood/pen/zsIik

    This I like…strip it out altogether.

    However, if you don’t have access to the source, you can’t inject a JS script.

    SOL I’m afraid…AFAIK.

    # May 7, 2013 at 12:00 pm

    @Justin_G

    >I know you can inject CSS code before and after certain elements

    Sort of…what you can do is inject stuff **into** elements before and after the **content** of those elements.

    What you can’t do is remove content or style stuff outside of that element.

    # May 7, 2013 at 12:04 pm

    Just use transparent color and you’re not seeing the text:

    .ex-one ul {
    color: transparent;
    }

    If you also want to remove the character effect entirely you can use `font-size: 0;` although there is a gotcha: you can’t use `em` in ul’s measurements and you need to use `font-size: medium;` or other means to restore font size in the li elements.

    .ex-one ul {
    color: transparent;
    font-size: 0;
    }

    .ex-one li {
    font-size: medium;
    margin: 1em 0;
    }

    Also `.ex-two ul:not(li)` makes no sense. You’re matching ul elements that aren’t li elements. So it always matches the ul element and is equivalent to writing `.ex-two ul`.

    # May 7, 2013 at 12:16 pm

    >If you also want to remove the character effect entirely you can use font-size: 0;

    That doesn’t **remove** it, of course, it’s still there in the source (and thus accessible) but it’s decent idea.

    # May 7, 2013 at 12:20 pm

    Yup, that is why I used the word effect. You can’t see the text when making selection and elements align as if the text wasn’t there at all, but if you copy’n’paste the text you’ll see the pipes and the text still exists in the DOM tree etc.

    # May 24, 2013 at 10:08 am

    Thanks Merri. That does the trick! And yes the reason for hacking it like this is because it is a SaaS product and I only have the ability to inject CSS overrides.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".