I have a Next.js app with five buttons that have the same SCSS class and height. However, the height of the ::after element in one button is different and I don't know why.

Scss class:

.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 code:

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>
);

Render output (.png)

I have a Next.js app with five buttons that have the same SCSS class and height. However, the height of the ::after element in one button is different and I don't know why.

Scss class:

.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 code:

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>
);

Render output (https://i.sstatic/9nDgBtcK.png)

• css
• next.js
• sass

Share Improve this question Follow asked Nov 19, 2024 at 16:28 benben 122 bronze badges 2

• Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet using the <> icon. See How to create a Minimal, Reproducible Example – Paulie_D Commented Nov 19, 2024 at 16:33
• 1 Your image appears to show two of the underlines being thicker than the other 3 - could you clarify why you see only one? At 1px height you may be seeing just the 'rounding error' created when the system has to map one CSS pixel to the several screen pixels on modern screens Try zooming in and out - do the lines that are thicker change? – A Haworth Commented Nov 19, 2024 at 17:13

Add a comment  | 

1 Answer 1

Sorted by: Reset to default -2

It seems that you have written your code in wrong hierarchy.

$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>

As your code is in .SCSS please check this.