How to make 'button:after' visible like 'button:before'

I have 4 "lines" moving when button is hovered. https://codepen.io/aphroditef/pen/yLQvxNy

I would like to have this effect https://codepen.io/aphroditef/pen/GRwQXJB with 4 lines, not just the three of them . Any advice?

I tried these

.buttonY button {
    background-color: transparent;
    border: none;
    position: relative;
    width: 400px;
    height: 120px;
    text-transform: uppercase;
    line-height: 120px;
    text-align: center;
    color: #4e1414;
    font-size: 45px;
    letter-spacing: 15px;
    overflow:hidden;

  }

.buttonY button:after{
    content:'';
    position: absolute;
    top: 100%;
    right: -100%;
    width: 100%;
    height: 4px;
    background-color: #4e1414;
    transition: all 0.5s;
}

.buttonY button:hover:after{
    right:0;
}

and I expected 'button:after' behave like 'button:before' .

Solution

The problem is that the after pseudo element is being placed at top: 100%. This puts its top at, well, 100% down so it's just outside the element.

Instead you can use bottom to ensure it's just inside the element.

.buttonY {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f9c87f;
}

.buttonY button {
  background-color: transparent;
  border: none;
  position: relative;
  width: 400px;
  height: 120px;
  text-transform: uppercase;
  line-height: 120px;
  text-align: center;
  color: #4e1414;
  font-size: 45px;
  letter-spacing: 15px;
  overflow: hidden;
}

.buttonY button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 4px;
  background-color: #4e1414;
  transition: all 0.5s;
}

.buttonY button:hover::before {
  left: 0;
}

.buttonY button::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 4px;
  background-color: #4e1414;
  transition: all 0.5s;
}

.buttonY button:hover::after {
  right: 0;
}

.buttonY span::before {
  content: '';
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 4px;
  height: 100%;
  background-color: #4e1414;
  transition: all 0.5s;
}

.buttonY button:hover span::before {
  bottom: 0;
}

.buttonY span::after {
  content: '';
  position: absolute;
  top: -100%;
  right: 0;
  width: 4px;
  height: 100%;
  background-color: #4e1414;
  transition: all 0.5s;
}

.buttonY button:hover span::after {
  top: 0;
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>

<body>
  <div class="areaButtons">
    <div class="buttonY">
      <button>
                Button Y
                <span></span>
            </button>
    </div>
  </div>

</body>

</html>

Note: the modern standard for indicating pseudo elements, as opposed to pseudo classes, is to use a double colon (::).