如何在无JS时将通知CSS箭头与多语言按钮底部中心对齐？

Absolutely! You can fix this with pure CSS—no JavaScript required. The problem with your original percentage approach is that it ties the arrow's position to the container's width, not the dynamic width of the button (which shifts with translated text). Here's a clean, reliable solution that keeps your existing structure mostly intact:

Step 1: Tweak the HTML #

Add a data-button-text attribute to the .notification__arrow-container that matches your button's text. This lets CSS mirror the button's width automatically:

<div class="notification__arrow-container" data-button-text="Do it">
  <div class="notification__arrow"></div>
</div>

(If you're using a template engine like React or Vue, bind this attribute to the same variable you use for the button text—this keeps it synced across translations without extra work.)

Step 2: Update the CSS #

Replace your existing .notification__arrow-container and .notification__arrow::after styles with these:

/* Match the button's width and alignment */
.notification__arrow-container {
  margin-top: 2rem;
  padding: 0 1rem; /* Sync with ticket__content's horizontal padding */
  text-align: right; /* Align with the button's right-aligned position */
  position: relative;
}

/* Generate a hidden copy of the button text to mirror its width */
.notification__arrow-container::before {
  content: attr(data-button-text);
  visibility: hidden;
  display: inline-block;
  /* Copy all button sizing styles to match its width exactly */
  padding: 1rem 1.5rem;
  min-width: 180px;
  font-size: 1rem;
  /* Hidden styles don't affect appearance */
  color: transparent;
  background-color: transparent;
}

.notification__arrow {
  position: absolute;
  top: 0;
  right: 1rem; /* Match ticket__content's right padding */
  width: 100%;
  height: 0;
}

/* Position and center the arrow */
.notification__arrow::after {
  top: -1rem; /* Place arrow just above the notification */
  left: 50%;
  transform: translateX(-50%); /* Center arrow horizontally */
  position: absolute;
  border-bottom-color: gold;
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-right: 1rem solid transparent;
  border-bottom-width: 1rem;
  border-bottom-style: solid;
  border-left: 1rem solid transparent;
}

/* Adjust notification margin since arrow container now handles spacing */
.notification {
  margin-top: 0;
}

How This Works #

1. The hidden ::before pseudo-element in the arrow container generates the same text as the button, using the data-button-text attribute. By copying the button's sizing styles, the container's width matches the button exactly—even when the text changes for translations.
2. The arrow is positioned absolutely within this container, centered horizontally with transform: translateX(-50%). Since the container's width mirrors the button, this ensures the arrow aligns perfectly with the button's bottom center.
3. We sync the container's padding and alignment with .ticket__content to keep horizontal positioning consistent across the component.

Alternative (No HTML Changes, Modern Browsers) #

If you can use modern CSS features like :has(), you can skip adding the data-button-text attribute. This targets the button directly to size the arrow container:

.ticket:has(.button) .notification__arrow-container {
  margin-top: 2rem;
  padding: 0 1rem;
  text-align: right;
  position: relative;
}

.ticket:has(.button) .notification__arrow-container::before {
  content: "";
  visibility: hidden;
  display: inline-block;
  padding: 1rem 1.5rem;
  min-width: 180px;
  font-size: 1rem;
  width: var(--button-width);
}

.button {
  /* ... your existing button styles ... */
  --button-width: auto; /* Matches the button's computed width */
}

Note: :has() works in all modern browsers but isn't supported in older ones like Internet Explorer.

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