How do I hide text node keeping element's background and sizing?

Question

Is there a way to hide a text node keeping element's background and sizing without changing its color, using nested tags, or overlapping it with a pseudo-element with CSS only?

button {
  color: transparent;
}

<button>text node</button>

Above is what I want to achieve but I don't want to do this by changing the color. I don't want to overlap it with something of the same background like a pseudo-element. I don't want to use nested tags like a span to change its visibility too. Any ideas?

Why don't you want to do this by changing the text color? Can you update your question to provide more background information? If you only want CSS and don't want to introduce other elements, you will have severely limited options. — disinfor, Sep 25 '19 at 16:41
Since your question is so exotic, maybe an exotic solution: use a metrically identical font (all glyphs the same width as the current one) but with all glyphs empty (no outlines). — Adam Jagosz, Sep 25 '19 at 16:44
@disinfor, some of the pseudo-elements may be dependant on the `currentColor` so I don't want to change it to transparent as it will affect those too. — sdvnksv, Sep 25 '19 at 16:57
@sdvnksv you may want to update your question with the information you've been providing in the comments about `pseudo` elements and having tons of content. — disinfor, Sep 25 '19 at 17:08

score 0 · Answer 1 · answered Sep 25 '19 at 16:50

0

Try This

p {
    font-size: 0;
}

answered Sep 25 '19 at 16:50

Friend

506
4
10

2

This can affect the element's size. – Adam Jagosz Sep 25 '19 at 16:51
yeah but it's the best solution in given situation if button has fixed size – Friend Sep 25 '19 at 17:02

score 0 · Answer 2 · answered Sep 25 '19 at 16:53

0

you can wrap the contents and use visibility:hidden css rule.

button > span {
  visibility: hidden;
}

<button>
  <span>
    hidden text
  </span>
</button>

answered Sep 25 '19 at 16:53

rlemon

17,518
14
92
123

1

I'm aware you said you don't want a wrapping element, but this really is the best approach. – rlemon Sep 25 '19 at 16:54
What makes this better than transparent text which doesn't introduce a new element? – disinfor Sep 25 '19 at 16:58
@rlemon, that's the first thing I thought of but I have tons of elements like this and I hate compilcating their markup. Can't change text to transparent too cause I need `currentColor`. – sdvnksv Sep 25 '19 at 17:01
1

@disinfor for starters, 0 opacity text can still be selected, copied, pasted, etc. it's still there just not visible to the user. visibility takes care of that while still leaving the element in the flow of the document. – rlemon Sep 25 '19 at 17:02
2

@sdvnksv if your circumstances are limiting how you can tackle the problem, well then you're going to have to use one of the hackier solutions. sometimes life ain't perfect. – rlemon Sep 25 '19 at 17:03
@rlemon Sure, but is that the intent? Or should screen readers still have access to this information? I guess that's where we need to know WHY the OP wants to do this. – disinfor Sep 25 '19 at 17:06
1

@disinfor that's fair. sdvnksv https://stackoverflow.com/a/26932832/829835 see this answer. if you can't change the colour, and you don't want to mess with opacity. pushing the text outside of the element then hiding overflow seems like a pretty solid solution (albeit still hacky imo) – rlemon Sep 25 '19 at 17:09
@rlemon to be clear, I think the `span` solution is the way to go, but the link you posted might be the answer as well - allows for the text to still be rendered somewhere (not able to be copied but screen readers will have access), yet keep the button size as if the text was still there. – disinfor Sep 25 '19 at 17:14

score 0 · Accepted Answer · answered Sep 25 '19 at 17:51

OK, after a bit of research and an advice from a fellow developer I came up with the following:

button {
  text-indent: -1000000%;
}

<button>some text here</button>

Make sure to keep the text-indent value in %. Otherwise it will also affect the button width.

How do I hide text node keeping element's background and sizing?

3 Answers3