文本背景颜色大小

Question

我想知道我是否可以更改文字的背景大小。

我的意思是，我有一个导航栏，其中包含一个文本超过<ul><li>的图像 我添加了display:flex;属性。

所有链接都由小条隔开。

当我将鼠标悬停在链接上时，我会使用悬停更改背景颜色或图像。但是，背景不会填充小条之间的区域。

＆＃13;

＆＃13;

nav ul {
  list-style-type: none;
  display: flex;
  margin-top: -30px;
  margin-left: -30px;
}
nav li {
  margin-right: 25px;
}
nav a {
  font-size: 1.2em;
  color: #666060;
  text-decoration: none;
}
li .news:hover {
  background: url("Images/news.png");
  color: white;
}

＆＃13;

<nav>

  <img src="Images/NavBar.png" alt="NavBar" />
  <ul>
    <li>
      <a href="#">
        <img src="Images/Home.png" alt="Home" title="home" />
      </a>
    </li>
    <li><a href="#" class="news"> News </a>
    </li>
    <li><a href="#" class="chat"> Chat </a>
    </li>
    <li><a href="#" class="forum"> Forum </a>
    </li>
    <li><a href="#" class="contact"> Contact </a>
    </li>
  </ul>

</nav>

＆＃13;

＆＃13;

＆＃13;