Hide text in a span

Question

I'm looking how to hide a text ("Tag") into a span like this :

<span class="tagged_as">
      Tag : 
      <a href="product-tag/enfant/" rel="tag">Enfant</a>, 
      <a href="product-tag/jeu-prime/" rel="tag">Jeu primé</a>
</span>

I tried to remove the text but I don't want to change something that a don't make... With css, i tried different things like font-size 0 but font of the href is also changed... visibility hidden... not working...

I don't know how to select only the text and not the "a" part.

With your html i think you can't. you can set font-size :0 to class .tagged_as and set a font-size for the children link — Sfili_81, Nov 23 '22 at 15:59
This question is related to what you are looking for: https://stackoverflow.com/q/31719647/4652564 — Nicolapps, Nov 23 '22 at 16:09
You have to be careful because depending on the CSS properties, screen readers can't read the text. Ideally you want that to happen to have a good code. — teefars, Nov 23 '22 at 17:26

score 0 · Answer 1 · answered Nov 23 '22 at 16:28

Found another way to do it tinkering with transforms. You can push the parent out of the viewport using translateX(-100vw) on the span and translateX(100vw) on a. Kind of a weird way, but you will not ever see it, provided the website scrolls vertically.

Changing the font-size to 0 and adding it back to a is more reliable (and elegant), but this solution might be helpful, if you don't know the texts font-size or if it is variable.

span {
  transform: translateX(-100vw);
  display: block;
}

span a {
  transform: translateX(100vw);
  display: block;
}

<span class="tagged_as">
      Tag : 
      <a href="product-tag/enfant/" rel="tag">Enfant</a>, 
      <a href="product-tag/jeu-prime/" rel="tag">Jeu primé</a>
</span>

Hide text in a span

1 Answers1