html - 在CSS中，我怎么能获得双重背景颜色，而文本居于第二个背景颜色元素的中心？

我想做这样的事情：
ul menu li tags

我应该为每个元素都使用双标签吗？
例如：

<ul class="menu">
    <div class="outside"><li class="inside"><a href="#">Firefox</a></li></div>
    <div class="outside"><li class="inside"><a href="#">Chrome</a></li></div>
    <div class="outside"><li class="inside"><a href="#">Opera</a></li></div>
</ul>

还是双李标签？
我在CSS中尝试了linear-gradient属性，但是只有一个标签，而且我想获得与图像中相同的结果，所以在我看来，必须有两个具有不同背景颜色的不同标签，而一个黑色，只需要具有较高的z-index属性。

我很新，在设计和样式上有点差劲，所以在此先感谢您的帮助！

最佳答案

您可以使用伪元素::before创建左侧的彩色边

请注意，您使用的div作为ul的直接子代无效，因此我将其删除了

ul.menu {
  display: flex;
  list-style: none;
  padding: 0;
}
ul.menu li {
  margin: 0 5px;
}
ul.menu a {
  position: relative;
  display: inline-block;
  width: 120px;
  background: black;
  color: white;
  padding: 4px 0 4px 10px;
  text-decoration: none;
  text-align: center;
}
ul.menu a::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: gray;
  width: 10px;
}

<ul class="menu">
    <li><a href="#">Firefox</a></li>
    <li><a href="#">Chrome</a></li>
    <li><a href="#">Opera</a></li>
</ul>

或左border

ul.menu {
  display: flex;
  list-style: none;
  padding: 0;
}
ul.menu li {
  margin: 0 5px;
}
ul.menu a {
  position: relative;
  display: inline-block;
  width: 120px;
  background: black;
  color: white;
  padding: 4px 0;
  text-decoration: none;
  text-align: center;
  border-left: 10px solid gray;
}

<ul class="menu">
    <li><a href="#">Firefox</a></li>
    <li><a href="#">Chrome</a></li>
    <li><a href="#">Opera</a></li>
</ul>

关于html - 在CSS中，我怎么能获得双重背景颜色，而文本居于第二个背景颜色元素的中心？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43078030/