CSS 伪 :after 不处理 href 标签

Question

我已经为 href 标签创建了伪 css。之前工作正常，但我不确定为什么这不再工作了。我已经尝试使用 chrome 检查元素来添加 css 并且 href 标签无法读取它。

@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>

这只发生在移动设备上。

是我的代码有问题还是有解决这个问题的方法？

Answer 1

所提供的代码对我来说效果很好，但如果您不在 HTML 文档的头部部分引用 FontAwesome css，它将不会呈现为实际图标。所以一定要参考它。例如，您可以将 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 放在 head 部分，看看是否有帮助。

Answer 2

Hi is that what you want 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>

</body>

</html>

Answer 3

折腾了几天，终于找到解决办法了。我不确定为什么即使在代码段上工作也会发生这种情况。

这是我的作品css

.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;
}

在我添加 display: block !important; 之后它工作正常。

CSS 伪 :after 不处理 href 标签

CSS Pseudo :after Not Working on an href tag

html

css

pseudo-element