Struggling to deal with parent background-color/ child: before background-color conflict

Question

I have managed to create a pseudo :before element to add to menu items which is working as I want however when I add a background color/ image to the parent div (bottom-nav) the pseudo element seems to break, can anyone shed some light?

Heads up I'm using fomantic UI (semantic UI fork)

.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/jquery@3.3.1/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.2/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>

Highly Effective · Accepted Answer · 2019-12-11T16:10:17.340

0

I changed 2 things which should make the pseudo element visible again. Changed z-index to a non-negative number, so it will be visible in front of the background-color. And also gave it a width which isn't 0.

[edit: updated code after further explanation by 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;
  }

edited Dec 11 '19 at 16:10

answered Dec 11 '19 at 15:38

Highly Effective

83
8

1

Thanks for your comment, my apologies I should've mentioned this before, I have added the z-index of 1 and a subsequent z-index of 2 and above to my item however this doesn't seem to work. Your solution does work however this makes the :before element appear over my .item whereas it needs to be underneath it. – agtfrust Dec 11 '19 at 15:59
1

.item { font-size: 14px; font-weight: 700; color: #fff; padding: 10px; z-index: 999; } .item: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; } .item:hover:before { opacity: 1; width: 100%; } – agtfrust Dec 11 '19 at 16:03
1

Do you want the pseudo element to be above the black background, but behind the text in de .item? – Highly Effective Dec 11 '19 at 16:05
1

yes that's correct, I have also tried to add a .bottom-nav{ z-index: -1; } .item:before{ z-index: 1 } .item{ z-index: 2; } – agtfrust Dec 11 '19 at 16:07
I've edited my original answer. Add your pseudo element to the parent of .item and give .item a position so its placed above the pseudo element. It would be nicer to add a span around the text in in .item and give that a higher index than the pseudo element. I think the root of the problem is that you are trying to make a child element have a higher z-index than its parent. Which isn't possible. – Highly Effective Dec 11 '19 at 16:12
1

That has solved it! Thanks so much for your swift response! – agtfrust Dec 11 '19 at 17:19

Struggling to deal with parent background-color/ child: before background-color conflict

1 Answers1