Question 207816 in CSS Question posted in
Some basic documentation can be found here.

Css – 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’ .

Tags:

2

Answers


  1. 0

    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 (::).

    Login or Signup to reply.
  2. 0

    If you want to consider an easier idea here is one with less of code:

    button {
  border: none;
  width: 400px;
  text-transform: uppercase;
  line-height: 120px;
  text-align: center;
  color: #4e1414;
  font-size: 45px;
  letter-spacing: 15px;
  --g: linear-gradient(currentColor 0 0) no-repeat;
  background:
   var(--g) 0    0,
   var(--g) 100% 0,
   var(--g) 100% 100%,
   var(--g) 0    100%;
  background-size: 0% 4px,4px 0%;
  transition: .5s;
}
button:hover {
  background-size: 100% 4px,4px 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background-color: #f9c87f;
}
    <button>Button Y</button>

    Related article for mode details: https://css-tricks.com/cool-hover-effects-using-background-properties/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search