Hide Text Characters Around Elements

[mackdoyle]

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.

[Paulie_D]

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

[wmwood]

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

[Justin_G]

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

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

[CrocoDillon]

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.

[Paulie_D]

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

[Paulie_D]

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

[Merri]

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

[Paulie_D]

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

[Merri]

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.

[mackdoyle]

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.

[Author]

Posts