伪元素无法100%填充overflow:hidden容器的问题求助

I get it—those tiny, persistent gaps between the red border and expanding pseudo-element on Mac browsers are super frustrating. They’re caused by rendering precision issues with transforms and how the pseudo-element is sized relative to the button’s border. Let’s walk through two reliable fixes that keep that slick hover effect intact.

Solution 1: Adjust Pseudo-element to Cover the Entire Button (Border Included) #

The core problem is your original pseudo-element is sized relative to the button’s padding box, not accounting for the 9px border. When rotated, its edges don’t quite reach the inner border edge, leaving a visible gap. Here’s the adjusted code:

.button {
  position: relative;
  display: inline-block;
  padding: 20px;
  line-height: 10px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  border: 9px solid black;
  border-radius: 55px;
  transition: all 0.35s ease-in-out;
  color: black;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  background-color: transparent;
}

.button:before {
  content: '';
  display: block;
  position: absolute;
  background-color: red;
  /* Align with button's outer edge (matches border width) */
  left: -9px;
  top: -9px;
  transform: rotate(-30deg);
  transform-origin: center;
  /* Cover full width including both border sides */
  width: calc(100% + 18px);
  height: 0;
  padding-top: 0%;
  transition: all 0.35s ease-in-out;
  z-index: -1;
  border-radius: inherit; /* Keep rounded corners consistent */
}

.button:hover {
  color: #fff;
  border-color: red;
}

.button:hover:before {
  padding-top: 200%;
}

Key tweaks:

• left: -9px and top: -9px position the pseudo-element to match the button’s outer border edge
• width: calc(100% + 18px) ensures it covers the full button width including both 9px borders
• Added border-radius: inherit to maintain the button’s rounded corners
• Removed translate(-50%, -50%) since we’re now covering the entire button from the start

This guarantees the pseudo-element fully covers the border area when expanded, eliminating the gap.

Solution 2: Replace Pseudo-element with Background Clip-path Transition #

If you want to avoid pseudo-element sizing headaches entirely, using a clip-path transition on the button’s background is a cleaner, more performant alternative. It creates a similar expanding effect without rendering gaps:

.button {
  position: relative;
  display: inline-block;
  padding: 20px;
  line-height: 10px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  border: 9px solid black;
  border-radius: 55px;
  transition: all 0.35s ease-in-out;
  color: black;
  cursor: pointer;
  background-color: red;
  /* Start with a tiny centered clip-path (hidden background) */
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
}

.button:hover {
  color: #fff;
  border-color: red;
  /* Expand clip-path to cover the entire button */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

This works by starting with a tiny, centered clip-path that hides the red background, then transitioning to a full polygon that covers the entire button on hover. No transforms, no pseudo-element sizing issues—just smooth, gap-free animation.

Both solutions will fix the cross-browser gap issue on Mac while preserving the original hover effect’s style.

内容的提问来源于stack exchange，提问作者ichti