Troubleshooting: CSS Pseudo :after doesn't apply to an anchor tag

I've created a pseudo CSS style for an anchor tag, which was working fine before. However, for some reason, it's no longer working. I tried using Chrome inspect element to add the CSS but it's not being read by the anchor tag.

@font-face {
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-solid-900.eot");
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-solid-900.woff2") format("woff2"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-solid-900.woff") format("woff"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-solid-900.ttf") format("truetype"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-solid-900.svg#fontawesome") format("svg");
}

.menu-item-has-children>a::after {
  content: '\f067' !important;
  font-family: FontAwesome;
  top: -13px !important;
  font-size: 18px !important;
  position: relative !important;
  -webkit-text-stroke: 1px #292929 !important;
}
<li id="menu-item-2222" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-2222 child-open" aria-haspopup="true">
  <a href="#">Behandelingen</a>
  <ul class="sub-menu isOpen" style="display: block;">
    <li id="menu-item-3495" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2807 current_page_item menu-item-3495"><a href="/overzicht-gezicht/" aria-current="page">Gezicht</a></li>
    <li id="menu-item-3496" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3496"><a href="/overzicht-handen-en-voeten/">Handen en voeten</a></li>
    <li id="menu-item-3494" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3494"><a href="/overzicht-waxen/">Harsen</a></li>
    <li id="menu-item-3492" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3492"><a href="/overzicht-ogen/">Ogen</a></li>
    <li id="menu-item-3491" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3491"><a href="/overzicht-lichaam/">Lichaam</a></li>
    <li id="menu-item-3493" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3493"><a href="/overzicht-voeding/">Voeding</a></li>
  </ul>
</li>

This issue is only occurring on mobile devices.

Could there be an error in my code, or is there a solution to resolve this problem?

htmlcsspseudo-element

Answer №1

The solution provided has been effective for me with one important note - if you forget to include the reference to FontAwesome css in the head section of your HTML document, the icon will not display properly. Therefore, be sure to include the reference. For instance, you can add 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
in the head section to ensure proper rendering.

Answer №2

Is this what you are seeking or looking for..!
 @font-face {
      font-family: 'FontAwesome';
      font-style: normal;
      font-weight: 900;
      font-display: auto;
    }
    
    .menu-item-has-children a::after {
      content: '\f067' !important;
      font-family: FontAwesome;
      top:0;
      left:5px;
      position:absolute;
      font-size: 10px !important;
      position: relative !important;
      -webkit-text-stroke: 1px #292929 !important;
    }
    ul li.menu-item{
    margin-bottom:10px;
    }
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

<li id="menu-item-2222" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-2222 child-open" aria-haspopup="true">
  <a href="#">Behandelingen</a>
  <ul class="sub-menu isOpen" style="display: block;">
    <li id="menu-item-3495" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2807 current_page_item menu-item-3495"><a href="/overzicht-gezicht/" aria-current="page">Gezicht</a></li>
    <li id="menu-item-3496" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3496"><a href="/overzicht-handen-en-voeten/">Handen en voeten</a></li>
    <li id="menu-item-3494" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3494"><a href="/overzicht-waxen/">Harsen</a></li>
    <li id="menu-item-3492" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3492"><a href="/overzicht-ogen/">Ogen</a></li>
    <li id="menu-item-3491" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3491"><a href="/overzicht-lichaam/">Lichaam</a></li>
    <li id="menu-item-3493" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3493"><a href="/overzicht-voeding/">Voeding</a></li>
  </ul>
</li>

Answer №3

It took a few days, but I finally found the solution. It's strange why this issue occurred, especially since it was working fine in the snippet.

Here is the CSS that I was using:

.menu-item-has-children>a::after {
  content: '\f067' !important;
  font-family: FontAwesome;
  top: -13px !important;
  font-size: 18px !important;
  position: relative !important;
  -webkit-text-stroke: 1px #292929 !important;
  display: block !important;
}

After adding display: block !important;, everything started working correctly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A JavaScript code snippet that stores the total number of bytes read from a CSV file in a variable

I currently have a CSV file located on a web server that is regularly updated with numeric and string data of varying lengths. I am seeking a solution to calculate the total byte values of each row when reading the file, as the byte count is crucial due ...

javascriptajaxhtml

Can a complete form be encapsulated within a single AngularJS directive?

While I have come across several instances of individuals utilizing a blend of HTML and directives to craft an AngularJS form (as seen here), my goal is to develop a self-contained widget. This widget would encompass all the necessary HTML for the form w ...

javascripthtmlangularjsforms

Ways to determine if an element is the initial child

I am currently facing issues while attempting to make my bootstrap carousel dynamic and inject data properly. My aim is to locate the first child of the injected data and apply the "active" class to it. I am utilizing Laravel Blade for rendering my data. B ...

jqueryhtmllaravelbootstrap-4

The positioning attribute and flexible height in CSS are essential for creating dynamic

My goal is to create a layout with 3 DIVs inside a container, similar to table rows. top {height = 100px} / middle {height = dynamic} / bottom {height = 100px} I am trying to figure out the best approach to make the height of the middle div dynamic whi ...

cssposition

JavaScript-generated div not recognizing CSS in Internet Explorer

Once again, dealing with Internet Explorer has become a major headache. On headset.no, we have incorporated a small blue search field. However, when you input "jabra" into the field, it should generate suggestions in a div underneath. This feature operates ...

javascripthtmlcssinternet-explorer

Troubleshooting a navigation problem with DNN and Bootstrap-3 specifically for mobile devices

Here are the steps to demonstrate this issue: 1. Visit the following page of the website: 2. Resize your browser window to mobile size and close the menu using the icon. After the animation finishes, the navigation items reappear. I have been struggling ...

csstwitter-bootstrap-3dotnetnuke

Enhancing Widget Titles in Wordpress with a <span>

Looking to customize the color of the first word in a widget title on a WordPress site? I'm running WP v.3.7.1 with a custom child theme based on twentythirteen. All it takes is wrapping the first word in a <span> tag and then styling it as nee ...

wordpresswidgettitlehtml

What steps do I need to take in order to show the present value using a range input?

Hey there! I'm working on a code in HTML that includes an input of type range. Here's what it looks like: This is my input: <input type="range" min="1" max="100" value="50" class="slider" id="myRange"> Unfortunately, I'm unable to s ...

javascriptphphtml

Side menu and grid display using HTML and CSS

Looking to revamp the layout of my angularJS website, specifically one page. Currently, information is displayed in a table format but I would like to switch it up by adding a left sidebar featuring a list of names (tiles). When a user clicks on a name, th ...

htmlcssangularjs

Are there any pre-existing pop-up methods available for AngularJS?

Is there a way to create a simple pop-up window with static text and just one "Ok" button? In Java/Swing, it's possible to achieve this with just one line of code using pre-defined classes. However, when it comes to Angular pop-ups, it seems like the ...

javascripthtmlangularjs

Adaptive Positioned Image Display

I currently have a Section with four blocks of content. Along the right-hand side of the screen, there are some images (as shown in this example) that I want to position absolutely. However, I am encountering an issue where these images overlap with the te ...

htmlcss

What is the best way to incorporate link tags into text in AngularJS?

I'm struggling with making links within strings clickable in Angular. Can anyone provide guidance on how to accomplish this? One of the string examples from my JSON data is: "I’m hosting #AFF Catwalk Show @Bullring on 27th Sept with @BillieFaiers. ...

javascripthtmlangularjsjsonstring

Verifying the status of a checkbox label in Java using Selenium

I am currently working on an automation project using Selenium and I'm struggling to figure out how to check the status of a checkbox input. Has anyone else encountered this issue before? Here is a sample code snippet in JavaScript with jQuery: $("i ...

javacsshtmlseleniuminput

Tips for adjusting content that is 900px wide to fit properly on a mobile screen while maintaining its original width

https://i.stack.imgur.com/JELN5.png Despite trying various meta tag variations, I am struggling to get this image properly scaled and displayed in React.js. Any suggestions on how to resolve this issue would be greatly appreciated. ...

cssreactjs

unable to execute PHP code

I am attempting to execute a PHP file that will update a database. On Chrome, I am encountering this error: https://i.sstatic.net/3ruNL.png This is the code I have in my index.html file: <!DOCTYPE html> <html> <body> <input type ...

javascripthtmlajax

Aligning the Twitter and Facebook buttons

Issue with Social Media Button Alignment I'm encountering a problem with aligning Twitter and Facebook buttons on my website. The alignment seems to be off and I need some help fixing it. Code Snippet html: <span id="social"> ...

htmlcssbuttonalignmentsocial-networking

What could be causing the jQuery news ticker to malfunction on my site?

I recently made some changes to my main page by embedding HTML and adding the following code/script: <ul class="newsticker"> <li>Etiam imperdiet volutpat libero eu tristique.</li> <li>Curabitur porttitor ante eget hendrerit ...

javascriptphpjqueryhtml

When viewing the material-ui Chip component at normal zoom, a border outlines the element, but this border disappears when zoomed in or out, regardless of

Edit I have recently discovered a solution to the unusual problem I was facing with the material-ui Chip Component. By adding the line -webkit-appearance: none; to the root div for the Chip, the issue seems to resolve itself. However, this line is being a ...

javascriptcssreactjsmaterial-ui

Ways to access the current element in the Evernote editor that corresponds to the cursor's position?

It seems that Evernote editor uses a Rich Text Editor which differs from the input or textarea tag. Therefore, I am unable to use the provided code to determine its type. Is there a way to retrieve the current element of the Evernote editor where the curso ...

javascripthtml

Using play() in HTML Audio prevents the IOS music player from playing

When developing a timer app, I am currently using html audio to play a beep sound by utilizing the audioElement.play() function. The user must interact with the screen to enable sound (press the unmute button). This particular web application acts as a fit ...

javascripthtmliosreactjsaudio