使用::after伪元素时遇到border-radius圆角失效问题

Hey there! Let's break down why your button's border-radius is getting messed up when using the ::after pseudo-element, and fix it right away.

The Root Cause #

Your button has border-radius set, but the ::after pseudo-element acts as a separate box that sits outside the button's clipped area by default. Even if the button itself is rounded, the pseudo-element will still show as its original shape (usually a square) that spills over the button's corners, making the rounded edges look broken.

Quick Fixes to Try #

1. Add overflow: hidden to the Button

This is the simplest solution. By setting overflow: hidden on the button container, any content (including the pseudo-element) that goes beyond the button's rounded borders will get clipped off.

Here's the updated CSS:

.yellow-button {
  border-radius: 0.375rem;
  background-color: yellow;
  padding: 13px 30px;
  margin-top: 5px;
  box-sizing: border-box;
  font-size: 0.875rem;
  /* Add this line to clip overflowing content */
  overflow: hidden;
  /* Optional: Use flex for better alignment of text + icon */
  display: inline-flex;
  align-items: center;
  gap: 8px; /* Space between text and icon */
}

.yellow-button::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 16px; /* Adjust to match your icon's size */
  height: 16px;
  background: url(../img/download-icon.png) no-repeat center/contain;
  /* Remove any extra margins that might push it outside */
  margin-left: 8px;
}

2. Use Absolute Positioning for the Pseudo-Element (Alternative)

If you want more control over the icon's position, you can position it absolutely inside the button. Just make sure the button has position: relative to act as the positioning container:

.yellow-button {
  border-radius: 0.375rem;
  background-color: yellow;
  padding: 13px 30px;
  margin-top: 5px;
  box-sizing: border-box;
  font-size: 0.875rem;
  overflow: hidden; /* Still needed to clip overflow */
  position: relative; /* Required for absolute positioning */
  padding-right: 50px; /* Make extra space for the icon */
}

.yellow-button::after {
  content: '';
  position: absolute;
  right: 15px; /* Adjust to control distance from right edge */
  top: 50%;
  transform: translateY(-50%); /* Vertically center the icon */
  width: 16px;
  height: 16px;
  background: url(../img/download-icon.png) no-repeat center/contain;
}

Why This Works #

• overflow: hidden ensures nothing escapes the button's rounded corners, so the pseudo-element's edges get clipped to match the button's border-radius.
• Using inline-flex or absolute positioning helps keep the icon aligned properly without causing overflow issues.

Just double-check that your download icon's dimensions aren't too large for the button's padding—if it's too big, it might still spill over even with overflow: hidden. Adjust the width and height values in the ::after styles to fit nicely inside the button's padding.

内容的提问来源于stack exchange，提问作者bnjmn.myers