Question

我试图创建一个带有::before和::after样式的按钮。

如果我使用绝对定位（如我注释掉的部分所示），则可以正常工作。

但是有趣的是，我发现translateY()不能按预期工作，并且不确定为什么。

.container {
  width: 300px;
  height: 200px;
  margin:50px;
  background-color:orangered;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn {
  border: none;
  border-radius: 0;
  
  background-color: #fff;
  height: 3px;
  width: 4.5rem;
  
  position: relative;
  
  &::before,
  &::after {
    background-color: #fff;
    height: 3px;
    width: 4.5rem;
    content: "";
    display: block;
    position: absolute;
    // left:0;
  }
  
  &::before { transform: translateY(-1rem); }
  &::after { transform: translateY(1rem); }
  
  // &::before { top: -1rem; }
  // &::after { top:  1rem; }
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
  <div class="container">
  <button class="btn">&nbsp;</button>
</div>
</body>
</html>

跟进：

我按照@雅克·古皮尔（Jacque Goupil）的建议编辑了问题。我会尽力改善我的问题，但仍在努力：）

我发现横轴怪异的定位是由于我在html中放入了 （我认为 带有line-height:1之类的东西，它们在垂直方向上增加了额外的空间）。因此实际上translateY可以正常工作，就像@Chris Tapay提到的那样。

关于垂直对齐方式，尽管left:0解决了这个问题，但是为什么它们最初没有对齐仍然令人困惑。

codepen link

Answer 1

要在水平方向对齐，请添加一个left: 0属性，我不确定为什么，但是浏览器会计算left: 6px。

实际上，我不确定在仅定位绝对位置时为什么要使用transform，只需将:before的{{1}}和top: -1rem的{{1}}设置为<。 / p>

您的:after工作正常，问题在于浏览器计算出的初始位置。

Answer 2

translateY工作正常。您可以通过注释代码段中的translateY行来注意到它。观察结果一秒钟，然后取消注释。您将看到它们精确地移动了-1rem和1rem。

然后，为了解决难题，必须为::before和::after伪元素设置初始位置，在这种情况下，您需要：

position: absolute;
top: 0;
left: 0;

不要依赖浏览器的默认值。记住创建CSS resets是有原因的。希望对您有所帮助。

css :: before :: after对齐规则

2 个答案: