Question

我正在为我正在处理的旧网站创建一个新的链接样式（真的把它变成一个按钮）并在使用时遇到一个神秘的填充问题：before和：after元素结合overflow：隐藏在main一个元素。我不知道它可能是什么。观看视频，了解我的意思：https://youtu.be/5sWIxoZdW88

这是我正在使用的代码。

.d-button {
  display: inline-block;
  text-decoration: none;
  border: 1px solid #f16768;
  color: white;
  font-size: 1em;
  padding: 10px 25px;
  position: absolute;
  overflow: hidden;
  text-align: center;
  z-index: 200;
}
.d-button:hover {
  text-decoration: none;
  color: white;
}
.d-button:before {
  display: inline-block;
  height: 80px;
  width: 80px;
  background: white;
  content: "";
  position: absolute;
  right: -87px;
  top: -53px;
  z-index: -99;
  transform: rotate(-30deg);
  transition: .3s all;
  transition-timing-function: ease-in-out;
}
.d-button:hover:before {
  right: -57px;
  top: -53px;
}
body {background:gray}

<a href="#" class="d-button">Let's Build</a>

我只是在寻找有关为何发生这种情况的线索。在我的Codepen模型中它很好，它对我来说没有意义为什么溢出：隐藏将添加这个填充。帮助

CSS - 神秘填充：after＆amp; ：之前

0 个答案: