隐藏 :before on :hover 按钮

Question

我不知道应该如何隐藏 :before 元素，并且只有当它是 "inside" 按钮 div 时才使其可见，以创建 filling 对悬停按钮的影响。

a.button {
  font-size: 20px;
  color: #000;
  border: 2px solid #000;
  padding: 8px 12px;
  position: relative;
  margin: 0;
}

a.button:before {
  transition: 0.5s all ease-in-out;
  content: '';
  position: absolute;
  background-color: red;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

a.button:hover {
  transition: 0.6s all ease-in-out;
  color: #fff;
}

a.button:hover:before {
  transition: 0.5s all ease-in-out;
  top: 0;
}

<a href="#" class="button">buttt</a>

Answer 1

将 :before 元素高度设置为 0 ，然后在 :hover:before 上将其更改为 100%

片段

a.button {
  font-size: 20px;
  color: #000;
  border: 2px solid #000;
  padding: 8px 12px;
  position: relative;
  margin: 0;
}

a.button:before {
  transition: 0.5s all ease-in-out;
  content: '';
  position: absolute;
  background-color: red;
  top: 100%;
  left: 0;
  width: 100%;
  height: 0;
  z-index: -1;
}

a.button:hover {
  transition: 0.6s all ease-in-out;
  color: #fff;
}

a.button:hover:before {
  transition: 0.5s all ease-in-out;
  top: 0;
  height:100%;
}

<a href="#" class="button">buttt</a>

Answer 2

您可以将 link 包裹在 div 中并将溢出设置为隐藏，如下所示：

    a.button {
      font-size: 20px;
      color: #000;
      border: 2px solid #000;
      padding: 8px 12px;
      position: relative;
      margin: 0;
    }

    a.button:before {
      transition: 0.5s all ease-in-out;
      content: '';
      position: absolute;
      background-color: red;
      top: 100%;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
.wrap {
    float: left;
    width: 65px;
    height: 32px;
    overflow: hidden;
}
    a.button:hover {
      transition: 0.6s all ease-in-out;
      color: #fff;
    }

    a.button:hover:before {
      transition: 0.5s all ease-in-out;
      top: 0;
    }

    <div class="wrap"><a href="#" class="button">buttt</a></div>

Answer 3

将 display:inline-block 和 overflow:hidden 添加到 a.button 样式，因为标签的默认显示是 inline.

a.button {
  font-size: 20px;
  color: #000;
  border: 2px solid #000;
  padding: 8px 12px;
  position: relative;
  margin: 0;
  overflow:hidden;
  display:inline-block; /* Add this */
  overflow:hidden; /* Add this */
}
a.button:before {
  transition: 0.5s all ease-in-out;
  content: '';
  position: absolute;
  background-color: red;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

a.button:hover {
  transition: 0.6s all ease-in-out;
  color: #fff;
}

a.button:hover:before {
  transition: 0.5s all ease-in-out;
  top: 0;
}

<a href="#" class="button">buttt</a>

Answer 4

只插入这个：

a.button {
  display: inline-block;
  overflow: hidden;
  //Other Codes...
}

a.button {
  font-size: 20px;
  color: #000;
  border: 2px solid #000;
  padding: 8px 12px;
  position: relative;
  margin: 0;
  display: inline-block;
  overflow: hidden;
}

a.button:before {
  transition: 0.5s all ease-in-out;
  content: '';
  position: absolute;
  background-color: red;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

a.button:hover {
  transition: 0.6s all ease-in-out;
  color: #fff;
}

a.button:hover:before {
  transition: 0.5s all ease-in-out;
  top: 0;
}

<a href="#" class="button">buttt</a>

隐藏 :before on :hover 按钮

Hide :before on :hover button

html

css

hover

pseudo-element