努力处理父级背景颜色/子级：在背景颜色冲突之前

Question

我设法创建了一个伪：before元素，可以添加到菜单项中，该菜单项可以按我的意愿工作，但是当我向父div（bottom-nav）添加背景色/图像时，伪元素似乎坏了，任何人都可以亮了些？

抬起头，我正在使用语义UI（语义UI分支）

.bottom-nav {
  background-color: #000;
  .menu {
    margin-bottom: 30px;
    .toggle-sidebar {
      margin-top: 25px;
      color: #2f2f2f;
    }
    .ui.dropdown {
      margin-top: 25px;
    }
    .item {
      font-family: Open Sans;
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      padding: 10px;
    }
    .item:before {
      content: '';
      opacity: 1;
      position: absolute;
      border-radius: 2px;
      height: 20px;
      transform: translate(-50%, 0);
      background-color: #cd2122 !important;
      overflow: hidden;
      width: 0%;
      left: 50%;
      z-index: -1;
      transition: 0.3s ease;
    }
    .item:hover:before {
      opacity: 1;
      width: 100%;
    }
  }
}

<!-- You MUST include jQuery before Fomantic -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
<div class="bottom-nav">
  <div class="ui container">
    <div class="ui grid">
      <div class="sixteen wide column mobile hidden tablet hidden menu">

        <div class="ui dropdown">
          <a class="item" href="#">Link 1</a>
        </div>
        <div class="ui dropdown">
          <a class="item " href="#">Link 2</a>
        </div>
        <div class="ui dropdown">
          <a class="item" href="#">Link 3</a>
        </div>
        <div class="ui dropdown">
          <a class="item" href="#">Link 4</a>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

我更改了2件事，应该使伪元素再次可见。将z-index更改为非负数，因此它将在背景颜色的前面可见。并给它一个不为0的宽度。

[[编辑：OP进一步解释后更新代码]

.item {
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    padding: 10px;
    position: relative;
  }

.ui.dropdown:before {
    content: '';
    opacity: 1;
    position: absolute;
    border-radius: 2px;
    height: 20px;
    transform: translate(-50%, 0);
    background-color: #cd2122 !important;
    overflow: hidden;
    width: 50px;
    left: 50%;
    z-index: 1 ;   
    transition: 0.3s ease;
  }