如何用jQuery复现::after伪元素的CSS下划线动画（非hover触发）

Got it, let's get this sorted! You've got that fancy underline animation that triggers on hover, but now you want it to play automatically in sync with text that changes every X seconds. Here's a straightforward approach to make that happen:

Step 1: Adjust the CSS Animation Trigger #

First, we'll replace the hover state with a custom class (like .animate-underline) so we can control when the animation starts programmatically. We'll also set the animation duration to match your text interval (let's use 3 seconds as an example—you can tweak this to your X value).

/* Base text/link styles */
.animated-text {
  position: relative;
  text-decoration: none;
  color: #333;
  display: inline-block;
}

/* Underline base state */
.animated-text::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: #007bff;
  transition: width 3s ease-in-out; /* Duration matches text switch interval */
}

/* Trigger full-width animation via class */
.animated-text.active::after {
  width: 100%;
}

Step 2: Add JavaScript to Sync Text Switching and Animation #

Next, we'll write a simple script that cycles through your text options, and triggers the underline animation each time the text changes. The animation will run for X seconds (matching the interval) and complete just as the next text switch happens.

<!-- HTML: Container for switching text -->
<div class="text-switcher">
  <span class="animated-text" id="changing-text">First Text</span>
</div>

// JavaScript to handle text cycling and animation sync
const textOptions = ["First Text", "Second Text", "Third Text", "Fourth Text"];
const textElement = document.getElementById("changing-text");
const switchInterval = 3000; // 3 seconds (your X value)
let currentIndex = 0;

function switchText() {
  // Reset animation by removing active class
  textElement.classList.remove("active");
  
  // Force browser reflow to register the state change
  void textElement.offsetWidth;
  
  // Update to next text
  currentIndex = (currentIndex + 1) % textOptions.length;
  textElement.textContent = textOptions[currentIndex];
  
  // Trigger the underline animation
  textElement.classList.add("active");
}

// Start the cycle immediately, then repeat every X seconds
switchText();
setInterval(switchText, switchInterval);

How This Works #

• The CSS transition duration is set to match your text switch interval, so the underline animates fully over the time the text is displayed.
• When switching text, we first reset the animation state, force a quick reflow (to ensure the browser picks up the class removal), then update the text and re-apply the active class to start the animation fresh.
• The setInterval handles cycling through your text options at the desired interval, keeping the animation perfectly synced with text changes.

You can tweak the transition timing function (ease-in-out), underline color, height, and interval duration to match your original design.

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