CODEWITHSUNDEEP
css
2-D
2-D

Reputation: 109

Why aren't ::after and ::pseudo aligned with main element?

I'm trying to create a simple burger menu using pseudo elements. However, I've came across two issues:

  1. ::before and ::after are a little bit offsetted to the right (relative to the main element), which I have absolutely no idea why

  2. when I don't set a height to .minimize-menu div it's automatically setted to 4px. Why does this happen (I mean, why not 5, 6 or 7px)?

body {
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.minimize-menu {
  /*     position: relative;
     */
  display: flex;
  justify-content: center;
  align-items: center;
  /*     top: 20px;
    right: 20px; */
  width: 15%;
  height: 25px;
}

.minimize-menu div {
  /*     position: relative;
     */
  width: 30%;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 1px;
  background-color: rgba(255, 255, 255);
}

.minimize-menu div::before,
.minimize-menu div::after {
  content: "";
  display: block;
  position: relative;
  width: 100%;
  top: -10px;
  left: 0;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 1px;
  background-color: rgba(255, 255, 255);
}

.minimize-menu div::after {
  top: 10px;
}
<div class="minimize-menu">
  <div></div>
</div>

https://jsfiddle.net/vowtz/deLqav9c/19/

Upvotes: 0

Views: 62

Answers (2)

John
John

Reputation: 5337

Your border is affecting a lot of things here giving which is why you have your 4px height. Also you can have position: relative on your .minimize-menu div and position: absolute; on your psuedo elements. And you will need to set a negative value for the left on the psuedos. See here:

body {
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.minimize-menu {
  /*     position: relative;
     */
  display: flex;
  justify-content: center;
  align-items: center;
  /*     top: 20px;
    right: 20px; */
  width: 15%;
  height: 25px;
}

.minimize-menu div {
  /*     position: relative;
     */
  width: 30%;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 1px;
  background-color: rgba(255, 255, 255);
  position: relative;
}

.minimize-menu div::before,
.minimize-menu div::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  top: -10px;
  left: -1px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 1px;
  background-color: rgba(255, 255, 255);
}

.minimize-menu div::after {
  top: 10px;
}
<div class="minimize-menu">
  <div></div>
</div>

Upvotes: 1

disinfor
disinfor

Reputation: 11533

For your first issue, it's because you have a border around your div and your pseudo elements are inside of that. So you can set a negative left on your pseudo elements;

The second issue, is because your your minimize-menu div is a flex child, so the pseudo elements are essentially setting the parent box height to 6px because of their border sizes - since pseudo elements are children.

You can test by removing the pseudo elements and you'll see that the div is only 2px tall - because of its border.

I'm looking for the MDN that explains this so I can add it to the answer.

body {
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.minimize-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 15%;
  height: 25px;
}

.minimize-menu div {
  width: 30%;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 1px;
  background-color: rgba(255, 255, 255);
}

.minimize-menu div::before,
.minimize-menu div::after {
  content: "";
  display: block;
  position: relative;
  width: 100%;
  top: -10px;
  left: -1px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 1px;
  background-color: rgba(255, 255, 255);
}

.minimize-menu div::after {
  top: 10px;
}
<div class="minimize-menu">
  <div></div>
</div>

Upvotes: 1

Related Questions