WordPress菜单项hover时:before过渡失效，求平滑淡入解决方案

Hey there! The issue here is that CSS transitions don’t work with the content property—it’s a discrete, on/off change that can’t be animated gradually. To get that smooth fade-in effect you want, we need to adjust our approach to use animatable properties like opacity or transform instead.

Here’s a revised solution that will give you the seamless hover animation you’re after:

/* Add relative positioning to the menu text container to anchor the pseudo-element */
.academy .avia-menu-text {
  position: relative;
  /* Reserve space for the pseudo-element upfront to prevent text jumping */
  padding-left: 45px;
}

/* Initial state: pseudo-element exists but is fully transparent and slightly offset */
.academy .avia-menu-text::before {
  content: 'Jetzt ';
  position: absolute;
  left: 0;
  opacity: 0;
  /* Define transition for smooth animation of opacity and position */
  transition: opacity 0.3s ease, transform 0.3s ease;
  -webkit-transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateX(-10px); /* Subtle slide-in effect to complement the fade */
}

/* Hover state: fade the pseudo-element in and move it into place */
.academy .avia-menu-text:hover::before {
  opacity: 1;
  transform: translateX(0);
}

Why this works: #

• We set the pseudo-element’s content upfront instead of changing it on hover. This ensures the element exists in the DOM from the start, so we can animate its visible properties.
• opacity: 0 hides the pseudo-element initially, and opacity: 1 on hover triggers the smooth fade-in via the transition rule.
• The transform: translateX() adds a subtle slide-in motion to make the effect feel more polished, but you can remove this line if you want a plain fade.
• The padding-left on the parent element prevents the main menu text from shifting when the pseudo-element appears—it reserves space for "Jetzt " right away.

If you prefer just a simple fade without the slide effect, you can simplify the code to this:

.academy .avia-menu-text {
  position: relative;
  padding-left: 45px;
}

.academy .avia-menu-text::before {
  content: 'Jetzt ';
  position: absolute;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  -webkit-transition: opacity 0.3s ease;
}

.academy .avia-menu-text:hover::before {
  opacity: 1;
}

Quick tips: #

• Adjust the transition duration (0.3s) to match your site’s vibe—3s is quite slow, so 0.2-0.5s is more typical for hover effects.
• Use your browser’s DevTools (F12) to inspect the element and make sure no other CSS rules are overriding these styles.

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