Question

现在我有一个带有::before和::after伪元素的按钮，它被设置为其父div宽度的90％。但是，我似乎无法在这90％的时间内计算伪元素。基本上，我想要的是border-box CSS规则，但有伪元素。这是我的代码：

HTML

<button type"submit">Send</button>

CSS

.contact button {
  height: 60px;
  background-color: #fff;
  font-weight: bold;
  position: relative;
  cursor: pointer;
}
.contact button::after,
.contact button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 3px solid #333;
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}
.contact button::after {
  -webkit-transform: translate(3px, 3px);
  transform: translate(3px, 3px);
}
.contact button::before {
  -webkit-transform: translate(-3px, -3px);
  transform: translate(-3px, -3px);
}

这是指向我的codepen的链接：http://codepen.io/Hudson_Taylor11/pen/XpBMwM?editors=1100

谢谢！

Answer 1

我找到的最容易解决的问题是：

left: 3px;
right: 3px;

对于两个伪元素。

计算伪元素作为元素宽度的一部分

1 个答案: