CSS伪元素:after在a标签上失效（仅移动端）

Let’s break down why your a::after pseudo-element isn’t working on mobile—even though it worked before and won’t apply even when adding CSS via Chrome DevTools. Here are the most likely fixes and debugging steps:

1. Check for CSS Overrides from Mobile Media Queries #

The top culprit for mobile-specific style breaks is conflicting media query rules. Your theme or existing CSS might have a @media (max-width: [your-breakpoint]) block that’s either:

• Setting display: none on the pseudo-element
• Overwriting the content property with an empty string or different value
• Using a more specific selector that takes priority over your .menu-item-has-children>a::after rule

How to debug:

• Open Chrome DevTools, switch to mobile view, and select the <a> tag inside .menu-item-has-children.
• Look at the ::after pseudo-element in the Elements panel. If it exists but styles are crossed out, hover over the crossed-out style to see which rule is overriding yours.

Fix:
Use a more specific selector to beat the conflicting rule (avoid !important unless absolutely necessary—specificity is cleaner):

/* Add parent classes to boost specificity */
.menu-item.menu-item-has-children.current-menu-parent>a::after {
    content: '\f067';
    font-family: 'FontAwesome';
    top: -13px;
    font-size: 18px;
    position: relative;
    -webkit-text-stroke: 1px #292929;
    /* Ensure consistent rendering on mobile */
    display: inline-block;
}

2. Verify Mobile HTML Structure Changes #

Many themes modify the menu DOM structure for mobile (e.g., adding a .mobile-menu wrapper or altering class names). Your selector might not match the mobile version of the element.

How to debug:

• In DevTools mobile view, inspect the <li> and <a> elements again. Check if menu-item-has-children is still present on the parent <li>, or if new mobile-specific classes are added.

Fix:
Update your selector to match the mobile DOM. For example, if a .mobile-nav wrapper exists on mobile:

.mobile-nav .menu-item-has-children>a::after {
    /* Your styles here */
}

3. Ensure Pseudo-Element Rendering Basics #

Mobile browsers sometimes need explicit properties to render pseudo-elements reliably:

• Add display: inline-block (pseudo-elements default to inline, but relative positioning can behave unpredictably on mobile)
• Confirm font-family matches your @font-face declaration exactly ('FontAwesome' with quotes is consistent)
• Double-check the content value: \f067 is the correct Unicode for the Font Awesome v5 plus icon

4. Rule Out Font Loading Issues #

While you mentioned DevTools CSS doesn’t work, quickly confirm Font Awesome loads on mobile:

• In DevTools’ Network tab, filter for "Fonts" and check if fa-solid-900.woff2 (or other font files) load successfully.
• If fonts fail, your CDN URLs might have CORS restrictions (unlikely with Cloudflare, but worth verifying).

Final Test #

After adjusting your selector and styles, force the rules to apply in DevTools mobile view. If the pseudo-element appears, you’ve fixed the specificity or structure issue.

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