CODEWITHSUNDEEP
htmlcsscss-position
RogerFedFan
RogerFedFan

Reputation: 566

Vertical Align Before Pseudo List Item

So I made a custom before pseudo line and I'm trying to figure out how to vertically align it center to my list items. How does one do that? I tried absolute positioning but it stacks all of them and places them in the middle rather than them being on each list item.

.menu {
  background: #ececec;
  width: 200px;
  margin-top: 40px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  transition: 0.5s all ease-in-out;
}

.menu li {
  padding: 10px 0;
  cursor: pointer;
}

.menu ul {
  position: relative;
}

.menu li:before {
  content: '';
  height: 30px;
  width: 3px;
  background-color: #FE715D;
  left: -10px;
  position: absolute;
  border-radius: 20px;
  opacity: 0;
  transition: 0.5s all ease-in-out;
}

.menu li:hover:before {
  transition: 0.5s all ease-in-out;
  opacity: 1;
}
<div class="menu">
  <ul>
    <li class="lifirst">About Me</li>
    <li class="limenu">My Skills<li class="limenu">Portfolio</li>
    <li class="limenu">Contact</li>
  </ul>
</div>

Upvotes: 1

Views: 45

Answers (1)

andreas
andreas

Reputation: 16936

To prevent the stacking of the pseudo elements, you have to set a position for their corresponding parent.

absolute
The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to its closest positioned ancestor if any

—position on MDN

In other words: If you add position: relative; to your <li> elements, every pseudo elements position is depending on its corresponding list item:

.menu {
  background: #ececec;
  width: 200px;
  margin-top: 40px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  transition: 0.5s all ease-in-out;
}

.menu li {
  padding: 10px 0;
  cursor: pointer;
  position: relative;
}

.menu ul {
  position: relative;
}

.menu li:before {
  content: '';
  height: 30px;
  width: 3px;
  background-color: #FE715D;
  left: -40px;
  top: 7px;
  position: absolute;
  border-radius: 20px;
  opacity: 0;
  transition: 0.5s all ease-in-out;
}

.menu li:hover:before {
  transition: 0.5s all ease-in-out;
  opacity: 1;
}
<div class="menu">
  <ul>
    <li class="lifirst">About Me</li>
    <li class="limenu">My Skills</l<li class="limenu">Portfolio</li>
    <li class="limenu">Contact</li>
  </ul>
</div>

Upvotes: 1

Related Questions