Html Question posted in
Some basic documentation can be found here.

Html – Why does CSS overflow hidden hide the borders?

I am currently practicing CSS animations, transitions and have been developing a lot of buttons but have been encountering errors on a few buttons. I am trying to implement the hover effect on the button, but the effect is not working properly.

In more detail, overflow:hidden causes in particular the bottom and right borders to be hidden. Possible cause could be the parent body tag has the CSS property of grid with align items center. I am making the buttons as shown in my code snippet and a fuller example in my Codepen.

View the code snippet to see the effect in play.

In particular, I am talking about the button with the border-4-but class. Ideally, the borders grow in the following way:

  • top: grow from left to right and come into existence
  • right: top to bottom
  • bottom: left to right
  • left: bottom to top

Tried different overflow properties to resolve issue to no avail , any explanation / alternatives would be appreciated.

.border-4-but {
  margin-top: 20px;
  /*   border : solid 3px ; */
  position: relative;
  color: deepskyblue;
  padding: 10px 20px;
  overflow: hidden;
}

.border-4-but:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  height: 100%;
  width: 100%;
  border-top: solid 2px;
  transition: all 1s;
}

.border-4-but:after {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  border-right: solid 2px;
  transition: all 1s;
}

.border-4-but span:after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  border-bottom: solid 2px;
  transition: all 1s;
}

.border-4-but span:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  height: 100%;
  width: 100%;
  border-left: solid 2px;
  transition: all 1s;
}

.border-4-but:hover:before,
.border-4-but:hover:after,
.border-4-but:hover span:after,
.border-4-but:hover span:before {
  top: 0;
  left: 0;
}
<body>
    // some other buttons 
  <a class="border-4-but"><span class="border-4-span"></span>hover here</a>
    // some other buttons 
  </body>
Tags:

2

Answers


  1. 0

    All your :before and :after pseudo elements should have the box-sizing: border-box; attribute. This will tell the system to put the border inside the element instead of outside (so to speak).
    So your code should be something like this:

    .border-4-but:before{
  content : "";
  position : absolute;
  top : 0;
  left : -100%;
  height : 100%;
  width : 100%;
  border-top : solid 2px;
  box-sizing: border-box;
  transition : all 1s;
}
.border-4-but:after{
  content : "";
  position : absolute ;
  top : -100%;
  left : 0;
  width : 100%;
  height : 100%;
  border-right : solid 2px;
  box-sizing: border-box;
  transition : all 1s;
}

.border-4-but span:after{
  content : "";
  position : absolute;
  top : 0;
  left : 100%;
  width : 100%;
  height : 100%;
  border-bottom : solid 2px;
  box-sizing: border-box;
  transition : all 1s;  
}

.border-4-but span:before{
  content : "";
  position : absolute;
  top : 100%;
  left : 0;
  height : 100%;
  width : 100%;
  border-left : solid 2px;
  box-sizing: border-box;
  transition : all 1s;
}

    Hope this helps!

    Login or Signup to reply.
  2. 0

    On top of BlenderTimer’s answer, overflow:hidden won’t work on inline elements. You would need to add display:inline-block on that <a> container so that the borders will show only when they come in.

    .border-4-but {
  display: inline-block;
  margin-top: 20px;
  /*   border : solid 3px ; */
  position: relative;
  color: deepskyblue;
  padding: 10px 20px;
  overflow: hidden;
}

.border-4-but:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  height: 100%;
  width: 100%;
  border-top: solid 2px;
  box-sizing: border-box;
  transition: all 1s;
}

.border-4-but:after {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  border-right: solid 2px;
  box-sizing: border-box;
  transition: all 1s;
}

.border-4-but span:after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  border-bottom: solid 2px;
  transition: all 1s;
  box-sizing: border-box;
}

.border-4-but span:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  height: 100%;
  width: 100%;
  border-left: solid 2px;
  transition: all 1s;
  box-sizing: border-box;
}

.border-4-but:hover:before,
.border-4-but:hover:after,
.border-4-but:hover span:after,
.border-4-but:hover span:before {
  top: 0;
  left: 0;
}
    <a class="border-4-but"><span class="border-4-span"></span>hover here</a>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search