"text-indent" 添加 href 后停止工作

Question

我真的是 CSS 的新手，我正在尝试使用“text-indent”方法隐藏一些文本，但是在添加 <a> -tag 之后它就不会了工作了。

我现在得到了我的 img 和文本使用 #english{} 我没有收到任何文本，但 <a> 不起作用。

像文本转换这样的东西工作得很好所以我想我的目标是正确的部分。
我在 text-indent:.

之前尝试 text-align: none;

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.

所以你需要一个块级元素

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>

"text-indent" 添加 href 后停止工作

"text-indent" stopt working after adding an href

html

css

text-indent