CSS 伪 :after 不处理 href 标签
CSS Pseudo :after Not Working on an href tag
我已经为 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>
这只发生在移动设备上。
是我的代码有问题还是有解决这个问题的方法?
所提供的代码对我来说效果很好,但如果您不在 HTML 文档的头部部分引用 FontAwesome css,它将不会呈现为实际图标。所以一定要参考它。例如,您可以将 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
放在 head 部分,看看是否有帮助。
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>
折腾了几天,终于找到解决办法了。
我不确定为什么即使在代码段上工作也会发生这种情况。
这是我的作品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; 之后它工作正常。
我已经为 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>
这只发生在移动设备上。
是我的代码有问题还是有解决这个问题的方法?
所提供的代码对我来说效果很好,但如果您不在 HTML 文档的头部部分引用 FontAwesome css,它将不会呈现为实际图标。所以一定要参考它。例如,您可以将 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
放在 head 部分,看看是否有帮助。
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>
折腾了几天,终于找到解决办法了。 我不确定为什么即使在代码段上工作也会发生这种情况。
这是我的作品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; 之后它工作正常。