css ::元素高度不起作用

Question

我有一个 Next.js 应用程序，其中有五个具有相同 SCSS 类和高度的按钮。但是，一个按钮中 ::after 元素的高度不同，我不知道为什么。

Scss 类：

.underline-button {
color: $color;
cursor: pointer;
user-select: none;

&:after {
  content: "";
  display: block;
  width: 50%;
  height: 1px;
  margin-left: auto;
  margin-right: auto;
  background: $color;
  transition: width 0.3s;
}

&:hover:after {
  width: 100%;
}

&:active:after {
  width: 0;
}

}

Jsx代码：

export default function Home() {
return (
  <div>
    <div className="underline-button">Button</div>
    <div className="underline-button">Button</div>
    <div className="underline-button">Button</div>
    <div className="underline-button">Button</div>
    <div className="underline-button">Button</div>
    <div className="underline-button">Button</div>
  </div>
);

渲染输出 (https://i.sstatic.net/9nDgBtcK.png)

Answer 1

您似乎在错误的层次结构中编写了代码。

$color: #333;

.underline-button {
  color: $color;
  cursor: pointer;
  user-select: none;
  text-align: center;
  padding: 15px 0;
  font-size: 24px;

  &:after {
    content: "";
    display: block;
    width: 50%;
    height: 1px;
    margin-left: auto;
    margin-right: auto;
    background: $color;
    transition: width 0.3s;
  }

  &:hover {
    &:after {
      width: 100%;
    }
  }

  &:active {
    :after {
      width: 0;
    }
  }
}

<div>
  <div class="underline-button">Button</div>
  <div class="underline-button">Button</div>
  <div class="underline-button">Button</div>
  <div class="underline-button">Button</div>
  <div class="underline-button">Button</div>
  <div class="underline-button">Button</div>
</div>

由于您的代码位于 .SCSS 中，请检查this。