1

Is there any way I could remove or hide the text (in this case, &ndash) between two elements purely with CSS? Let's say I have no access to the HTML.

This is exactly how the layout is in my case:

<span class="foo">
    <span class="bar">sometext</span> 
    &ndash; <!-- hide this! -->
    <span class="bar">sometext</span>
</span>

I had a mini-eureka moment, when I though of not(). Simply select foo, and hide everything BUT the spans (also tried not(.bar)). I tried it like this, which unfortunately did not help:

.foo:not(span) {
    content: ""; //tried to set their content as nothing
    display: none; //and tried to simply hide them
}

I don't think there is a pseudo element that selects nth line? Just like ::first-line

Thanks

user9233287
  • 23
  • 3
  • You can set (to `0`) and re-set `font-size`, for one terrible (perfectly fine) hack. – Jan Kyu Peblik Mar 28 '19 at 14:45
  • In the .foo:not(span) selector you are selecting elements with class foo, which are not span, thus you are not selecting anything. And the content property applies to ::before and ::after pseudo-elements. https://developer.mozilla.org/en-US/docs/Web/CSS/content – Marie Beaufort Mar 28 '19 at 14:56

1 Answers1

0

Use inheritance and transparent color. Protect the children with double specificity by repeating selectors like classes ex.: .bar.bar

span.foo {
  color: rgba(0,0,0,0) /* or color: transparent */
}

span.bar.bar {
  color: tomato;
}
<span class="foo">
    <span class="bar">sometext</span> 
    &ndash; <!-- hide this! -->
    <span class="bar">sometext</span>
</span>
zer00ne
  • 41,936
  • 6
  • 41
  • 68
  • I'd like to add that this and the question Mark Baijens linked to both worked. I found the other question's solution better as I don't have to set a color and possibly have it wrong some time in the future. – user9233287 Mar 28 '19 at 15:17
  • The color is easy either `transparent` or `rgba(0,0,0,0)` – zer00ne Mar 28 '19 at 15:24