"text-indent" stopt working after adding an href

Question

I'm really new to CSS and I'm trying to hide some text with with the "text-indent" method but after adding an <a> -tag it just wouldn't work anymore.

I now got my img and the the text with #english{} i get no text but the <a> doesn't work.

stuff like text-transform works just fine so I think I'm targeting the right part.
I tried to text-align: none; before the text-indent:.

nav ul {
  text-align: center;
}

nav li {
  display: inline-block;
  font-size: large;
  text-transform: uppercase;
  width: 160px;
}

nav li ul {
  display: inline-flex;
  width: 100px;
}

#english a {
  background-image: url('images/languages/english.png');
  background-repeat: no-repeat;
  text-indent: -9999999px;
}

#german a {
  background-image: url('images/languages/german.png');
  background-repeat: no-repeat;
  text-indent: -9999999px;
}

#chinese a {
  background-image: url('images/languages/chinese.png');
  background-repeat: no-repeat;
  text-indent: -9999999px;
}

<nav>
  <ul>
    <li>Home</li>
    <li>Biografie</li>
    <li>Termine</li>
    <li>Medien</li>
    <li>Kontakt</li>
    <li>
      <ul>
        <li id="english"><a href="en/home.html">english</a></li>
        <li id="german"><a href="deutsch.html">german</a></li>
        <li id="chinese"><a href="chinesisch.html">chinese</a></li>
      </ul>
    </li>

  </ul>
</nav>

Answer 1

https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

The text-indent CSS property sets the length of empty space (indentation) that is put before lines of text in a block.

Horizontal spacing is with respect to the left (or right, for right-to-left layout) edge of the containing block-level element's content box.

so you need a block-level element

nav ul {
  text-align: center;
}

nav li {
  display: inline-block;
  font-size: large;
  text-transform: uppercase;
  width: 160px;
}

nav li ul {
  display: inline-flex;
  width: 100px;
}

nav li ul li {
  display: inline-block;
  background-repeat: no-repeat;
  text-indent: -9999999px;
}

#english a {
  background-image: url('images/languages/english.png');
}

#german a {
  background-image: url('images/languages/german.png');
}

#chinese a {
  background-image: url('images/languages/chinese.png');
}

<nav>
  <ul>
    <li>Home</li>
    <li>Biografie</li>
    <li>Termine</li>
    <li>Medien</li>
    <li>Kontakt</li>
    <li>
      <ul>
        <li id="english"><a href="en/home.html">english</a></li>
        <li id="german"><a href="deutsch.html">german</a></li>
        <li id="chinese"><a href="chinesisch.html">chinese</a></li>
      </ul>
    </li>

  </ul>
</nav>