Pseudo element not full container width when border used

Question

I have a piece of html/css that represents a button with a border.

The button has pseudo elements which overlay the button - the simple example shows one of them.

<

Answer 1

Try increasing the width of the pseudoelement with the size of the border of the parent and shift it to the left with left: -4px:

.container {
  padding: 50px;
}

.button {
  border: solid 4px red;
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}

.button::before {
  background-color: rgba(76, 255, 0, 0.8);
  box-sizing: inherit;
  content: "";
  display: block;
  position: absolute;
  top: -4px;
  left: -4px;
  height: 44px;
  width: calc(100% + 8px);
  z-index: -1;
}

  Button