pseudoelement works in Firefox but not Chrome, why?
I am trying to use a pseudoelement to replace the <li> for <ul> with a triangle. I followed this tutorial.
The problem is that my CSS works in Firefox but not Chrome on Windows.
Here is my CSS:
article ul {
list-style: none;
}
article ul > li::before {
font-family: FontAwesome;
content: "f0da";
color: $darkbrown;
display: inline-block;
width: 1em;
margin-left: -1em
}
I am targeting article because I have <ul> in the header and footer that I do not want to apply the triangle to.
In Firefox, this works as expected (<ul> in the article have the triangle, and <ol> in the article show numbers). However, in Chrome, the <ul> in the article have a triangle, but the <ol> in the article also have triangles.
Here's an example of the HTML (sorry, it's from Drupal and a little ugly; I cleaned it up as best I could):
<body class="path-node page-node-type-lp navbar-is-static-top has-glyphicons">
<a href="#main-content" class="visually-hidden focusable skip-link">
メインコンテンツに移動
</a>
<div role="main" class="main-container container js-quickedit-main-content">
<div class="row">
<div class="col-sm-12" role="heading">
<section class="col-sm-12">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10 col-xs-12">
<a id="main-content"></a>
<div class="region region-content">
<article role="article" about="/myurl" class="lp full clearfix">
<div class="content">
<div class="layout layout--onecol">
<div class="layout__region layout__region--content">
<section
class="block block-layout-builder block-field-blocknodelpbody clearfix">
<div class="field field--name-body field--type-text-with-summary field--label-hidden field--item">
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</div>
</section>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</body>
css
asked Nov 10 '18 at 5:34
Patrick KennyPatrick Kenny
501822
add a comment |
I am trying to use a pseudoelement to replace the <li> for <ul> with a triangle. I followed this tutorial.
The problem is that my CSS works in Firefox but not Chrome on Windows.
Here is my CSS:
article ul {
list-style: none;
}
article ul > li::before {
font-family: FontAwesome;
content: "f0da";
color: $darkbrown;
display: inline-block;
width: 1em;
margin-left: -1em
}
I am targeting article because I have <ul> in the header and footer that I do not want to apply the triangle to.
In Firefox, this works as expected (<ul> in the article have the triangle, and <ol> in the article show numbers). However, in Chrome, the <ul> in the article have a triangle, but the <ol> in the article also have triangles.
Here's an example of the HTML (sorry, it's from Drupal and a little ugly; I cleaned it up as best I could):
<body class="path-node page-node-type-lp navbar-is-static-top has-glyphicons">
<a href="#main-content" class="visually-hidden focusable skip-link">
メインコンテンツに移動
</a>
<div role="main" class="main-container container js-quickedit-main-content">
<div class="row">
<div class="col-sm-12" role="heading">
<section class="col-sm-12">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10 col-xs-12">
<a id="main-content"></a>
<div class="region region-content">
<article role="article" about="/myurl" class="lp full clearfix">
<div class="content">
<div class="layout layout--onecol">
<div class="layout__region layout__region--content">
<section
class="block block-layout-builder block-field-blocknodelpbody clearfix">
<div class="field field--name-body field--type-text-with-summary field--label-hidden field--item">
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</div>
</section>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</body>
css
asked Nov 10 '18 at 5:34
Patrick KennyPatrick Kenny
501822
1
Got some HTML for this so we can see the issue for ourselves?
– BoltClock♦
Nov 10 '18 at 5:44
What he said. I whipped together a jsfiddle, but it works as expected in both browsers, so there is something wrong in a part of your code that you're not showing.
– Mr Lister
Nov 10 '18 at 8:23
@BoltClock I've added an example of the failing HTML.
– Patrick Kenny
Nov 12 '18 at 14:14
@MrLister Thanks, I added an example of the failing HTML.
– Patrick Kenny
Nov 12 '18 at 14:14
add a comment |
I am trying to use a pseudoelement to replace the <li> for <ul> with a triangle. I followed this tutorial.
The problem is that my CSS works in Firefox but not Chrome on Windows.
Here is my CSS:
article ul {
list-style: none;
}
article ul > li::before {
font-family: FontAwesome;
content: "f0da";
color: $darkbrown;
display: inline-block;
width: 1em;
margin-left: -1em
}
I am targeting article because I have <ul> in the header and footer that I do not want to apply the triangle to.
In Firefox, this works as expected (<ul> in the article have the triangle, and <ol> in the article show numbers). However, in Chrome, the <ul> in the article have a triangle, but the <ol> in the article also have triangles.
Here's an example of the HTML (sorry, it's from Drupal and a little ugly; I cleaned it up as best I could):
<body class="path-node page-node-type-lp navbar-is-static-top has-glyphicons">
<a href="#main-content" class="visually-hidden focusable skip-link">
メインコンテンツに移動
</a>
<div role="main" class="main-container container js-quickedit-main-content">
<div class="row">
<div class="col-sm-12" role="heading">
<section class="col-sm-12">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10 col-xs-12">
<a id="main-content"></a>
<div class="region region-content">
<article role="article" about="/myurl" class="lp full clearfix">
<div class="content">
<div class="layout layout--onecol">
<div class="layout__region layout__region--content">
<section
class="block block-layout-builder block-field-blocknodelpbody clearfix">
<div class="field field--name-body field--type-text-with-summary field--label-hidden field--item">
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</div>
</section>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</body>
css
asked Nov 10 '18 at 5:34
Patrick KennyPatrick Kenny
501822
I am trying to use a pseudoelement to replace the <li> for <ul> with a triangle. I followed this tutorial.
The problem is that my CSS works in Firefox but not Chrome on Windows.
Here is my CSS:
article ul {
list-style: none;
}
article ul > li::before {
font-family: FontAwesome;
content: "f0da";
color: $darkbrown;
display: inline-block;
width: 1em;
margin-left: -1em
}
I am targeting article because I have <ul> in the header and footer that I do not want to apply the triangle to.
In Firefox, this works as expected (<ul> in the article have the triangle, and <ol> in the article show numbers). However, in Chrome, the <ul> in the article have a triangle, but the <ol> in the article also have triangles.
Here's an example of the HTML (sorry, it's from Drupal and a little ugly; I cleaned it up as best I could):
<body class="path-node page-node-type-lp navbar-is-static-top has-glyphicons">
<a href="#main-content" class="visually-hidden focusable skip-link">
メインコンテンツに移動
</a>
<div role="main" class="main-container container js-quickedit-main-content">
<div class="row">
<div class="col-sm-12" role="heading">
<section class="col-sm-12">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10 col-xs-12">
<a id="main-content"></a>
<div class="region region-content">
<article role="article" about="/myurl" class="lp full clearfix">
<div class="content">
<div class="layout layout--onecol">
<div class="layout__region layout__region--content">
<section
class="block block-layout-builder block-field-blocknodelpbody clearfix">
<div class="field field--name-body field--type-text-with-summary field--label-hidden field--item">
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</div>
</section>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</body>
css
css
asked Nov 10 '18 at 5:34
Patrick KennyPatrick Kenny
501822
asked Nov 10 '18 at 5:34
Patrick KennyPatrick Kenny
501822
edited Nov 14 '18 at 9:29
Patrick Kenny
asked Nov 10 '18 at 5:34
Patrick KennyPatrick Kenny
501822
asked Nov 10 '18 at 5:34
Patrick KennyPatrick Kenny
501822
asked Nov 10 '18 at 5:34
Patrick KennyPatrick Kenny
501822
501822
1
Got some HTML for this so we can see the issue for ourselves?
– BoltClock♦
Nov 10 '18 at 5:44
What he said. I whipped together a jsfiddle, but it works as expected in both browsers, so there is something wrong in a part of your code that you're not showing.
– Mr Lister
Nov 10 '18 at 8:23
@BoltClock I've added an example of the failing HTML.
– Patrick Kenny
Nov 12 '18 at 14:14
@MrLister Thanks, I added an example of the failing HTML.
– Patrick Kenny
Nov 12 '18 at 14:14
add a comment |
1
Got some HTML for this so we can see the issue for ourselves?
– BoltClock♦
Nov 10 '18 at 5:44
What he said. I whipped together a jsfiddle, but it works as expected in both browsers, so there is something wrong in a part of your code that you're not showing.
– Mr Lister
Nov 10 '18 at 8:23
@BoltClock I've added an example of the failing HTML.
– Patrick Kenny
Nov 12 '18 at 14:14
@MrLister Thanks, I added an example of the failing HTML.
– Patrick Kenny
Nov 12 '18 at 14:14
1
1
Got some HTML for this so we can see the issue for ourselves?
– BoltClock♦
Nov 10 '18 at 5:44
Got some HTML for this so we can see the issue for ourselves?
– BoltClock♦
Nov 10 '18 at 5:44
What he said. I whipped together a jsfiddle, but it works as expected in both browsers, so there is something wrong in a part of your code that you're not showing.
– Mr Lister
Nov 10 '18 at 8:23
What he said. I whipped together a jsfiddle, but it works as expected in both browsers, so there is something wrong in a part of your code that you're not showing.
– Mr Lister
Nov 10 '18 at 8:23
@BoltClock I've added an example of the failing HTML.
– Patrick Kenny
Nov 12 '18 at 14:14
@BoltClock I've added an example of the failing HTML.
– Patrick Kenny
Nov 12 '18 at 14:14
@MrLister Thanks, I added an example of the failing HTML.
– Patrick Kenny
Nov 12 '18 at 14:14
@MrLister Thanks, I added an example of the failing HTML.
– Patrick Kenny
Nov 12 '18 at 14:14
add a comment |
2 Answers
2
active
oldest
votes
I'm not sure i'm understanding your issue as your code appears to work the way you intend. I've added a <ul> inside your <article> to show that it has a triangle next to it while the <ol> shows the default numbering. Try browsing this example in Chrome to see the results.
article ul {
list-style: none;
}
article ul>li::before {
font-family: FontAwesome;
content: "f0da";
color: red;
display: inline-block;
width: 1em;
margin-left: -1em
}<a href="#main-content" class="visually-hidden focusable skip-link">
メインコンテンツに移動
</a>
<div role="main" class="main-container container js-quickedit-main-content">
<div class="row">
<div class="col-sm-12" role="heading">
<section class="col-sm-12">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10 col-xs-12">
<a id="main-content"></a>
<div class="region region-content">
<article role="article" about="/myurl" class="lp full clearfix">
<div class="content">
<div class="layout layout--onecol">
<div class="layout__region layout__region--content">
<section class="block block-layout-builder block-field-blocknodelpbody clearfix">
<div class="field field--name-body field--type-text-with-summary field--label-hidden field--item">
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</section>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
</div>
</div>
</div>answered Nov 12 '18 at 16:00
D. StevensD. Stevens
642
This would be better off as a comment than an answer. Also, your ul does not show triangles.
– Mr Lister
Nov 12 '18 at 17:45
add a comment |
I finally found the problem, which related to inlining critical css using the Drupal CriticalCSS module.
Basically, what happened is that I had generated the critical CSS based on old CSS, and this inline css (the critical CSS) was overriding the working CSS in the file I was editing.
Apparently, Firefox gives priority to the non-inline CSS, while Chrome and Edge prioritize the inline CSS, hence the reason for the difference in what was displayed.
Lesson learned: Make sure any inline CSS is current when editing CSS. (I am looking in to ways to automate that right now.)
answered Nov 14 '18 at 9:28
Patrick KennyPatrick Kenny
501822
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53236284%2fpseudoelement-works-in-firefox-but-not-chrome-why%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
I'm not sure i'm understanding your issue as your code appears to work the way you intend. I've added a <ul> inside your <article> to show that it has a triangle next to it while the <ol> shows the default numbering. Try browsing this example in Chrome to see the results.
article ul {
list-style: none;
}
article ul>li::before {
font-family: FontAwesome;
content: "f0da";
color: red;
display: inline-block;
width: 1em;
margin-left: -1em
}<a href="#main-content" class="visually-hidden focusable skip-link">
メインコンテンツに移動
</a>
<div role="main" class="main-container container js-quickedit-main-content">
<div class="row">
<div class="col-sm-12" role="heading">
<section class="col-sm-12">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10 col-xs-12">
<a id="main-content"></a>
<div class="region region-content">
<article role="article" about="/myurl" class="lp full clearfix">
<div class="content">
<div class="layout layout--onecol">
<div class="layout__region layout__region--content">
<section class="block block-layout-builder block-field-blocknodelpbody clearfix">
<div class="field field--name-body field--type-text-with-summary field--label-hidden field--item">
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</section>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
</div>
</div>
</div>answered Nov 12 '18 at 16:00
D. StevensD. Stevens
642
This would be better off as a comment than an answer. Also, your ul does not show triangles.
– Mr Lister
Nov 12 '18 at 17:45
add a comment |
I'm not sure i'm understanding your issue as your code appears to work the way you intend. I've added a <ul> inside your <article> to show that it has a triangle next to it while the <ol> shows the default numbering. Try browsing this example in Chrome to see the results.
article ul {
list-style: none;
}
article ul>li::before {
font-family: FontAwesome;
content: "f0da";
color: red;
display: inline-block;
width: 1em;
margin-left: -1em
}<a href="#main-content" class="visually-hidden focusable skip-link">
メインコンテンツに移動
</a>
<div role="main" class="main-container container js-quickedit-main-content">
<div class="row">
<div class="col-sm-12" role="heading">
<section class="col-sm-12">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10 col-xs-12">
<a id="main-content"></a>
<div class="region region-content">
<article role="article" about="/myurl" class="lp full clearfix">
<div class="content">
<div class="layout layout--onecol">
<div class="layout__region layout__region--content">
<section class="block block-layout-builder block-field-blocknodelpbody clearfix">
<div class="field field--name-body field--type-text-with-summary field--label-hidden field--item">
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</section>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
</div>
</div>
</div>answered Nov 12 '18 at 16:00
D. StevensD. Stevens
642
This would be better off as a comment than an answer. Also, your ul does not show triangles.
– Mr Lister
Nov 12 '18 at 17:45
add a comment |
I'm not sure i'm understanding your issue as your code appears to work the way you intend. I've added a <ul> inside your <article> to show that it has a triangle next to it while the <ol> shows the default numbering. Try browsing this example in Chrome to see the results.
article ul {
list-style: none;
}
article ul>li::before {
font-family: FontAwesome;
content: "f0da";
color: red;
display: inline-block;
width: 1em;
margin-left: -1em
}<a href="#main-content" class="visually-hidden focusable skip-link">
メインコンテンツに移動
</a>
<div role="main" class="main-container container js-quickedit-main-content">
<div class="row">
<div class="col-sm-12" role="heading">
<section class="col-sm-12">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10 col-xs-12">
<a id="main-content"></a>
<div class="region region-content">
<article role="article" about="/myurl" class="lp full clearfix">
<div class="content">
<div class="layout layout--onecol">
<div class="layout__region layout__region--content">
<section class="block block-layout-builder block-field-blocknodelpbody clearfix">
<div class="field field--name-body field--type-text-with-summary field--label-hidden field--item">
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</section>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
</div>
</div>
</div>answered Nov 12 '18 at 16:00
D. StevensD. Stevens
642
I'm not sure i'm understanding your issue as your code appears to work the way you intend. I've added a <ul> inside your <article> to show that it has a triangle next to it while the <ol> shows the default numbering. Try browsing this example in Chrome to see the results.
article ul {
list-style: none;
}
article ul>li::before {
font-family: FontAwesome;
content: "f0da";
color: red;
display: inline-block;
width: 1em;
margin-left: -1em
}<a href="#main-content" class="visually-hidden focusable skip-link">
メインコンテンツに移動
</a>
<div role="main" class="main-container container js-quickedit-main-content">
<div class="row">
<div class="col-sm-12" role="heading">
<section class="col-sm-12">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10 col-xs-12">
<a id="main-content"></a>
<div class="region region-content">
<article role="article" about="/myurl" class="lp full clearfix">
<div class="content">
<div class="layout layout--onecol">
<div class="layout__region layout__region--content">
<section class="block block-layout-builder block-field-blocknodelpbody clearfix">
<div class="field field--name-body field--type-text-with-summary field--label-hidden field--item">
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</section>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
</div>
</div>
</div>article ul {
list-style: none;
}
article ul>li::before {
font-family: FontAwesome;
content: "f0da";
color: red;
display: inline-block;
width: 1em;
margin-left: -1em
}<a href="#main-content" class="visually-hidden focusable skip-link">
メインコンテンツに移動
</a>
<div role="main" class="main-container container js-quickedit-main-content">
<div class="row">
<div class="col-sm-12" role="heading">
<section class="col-sm-12">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10 col-xs-12">
<a id="main-content"></a>
<div class="region region-content">
<article role="article" about="/myurl" class="lp full clearfix">
<div class="content">
<div class="layout layout--onecol">
<div class="layout__region layout__region--content">
<section class="block block-layout-builder block-field-blocknodelpbody clearfix">
<div class="field field--name-body field--type-text-with-summary field--label-hidden field--item">
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</section>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
</div>
</div>
</div>article ul {
list-style: none;
}
article ul>li::before {
font-family: FontAwesome;
content: "f0da";
color: red;
display: inline-block;
width: 1em;
margin-left: -1em
}<a href="#main-content" class="visually-hidden focusable skip-link">
メインコンテンツに移動
</a>
<div role="main" class="main-container container js-quickedit-main-content">
<div class="row">
<div class="col-sm-12" role="heading">
<section class="col-sm-12">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10 col-xs-12">
<a id="main-content"></a>
<div class="region region-content">
<article role="article" about="/myurl" class="lp full clearfix">
<div class="content">
<div class="layout layout--onecol">
<div class="layout__region layout__region--content">
<section class="block block-layout-builder block-field-blocknodelpbody clearfix">
<div class="field field--name-body field--type-text-with-summary field--label-hidden field--item">
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</section>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
</div>
</div>
</div>answered Nov 12 '18 at 16:00
D. StevensD. Stevens
642
answered Nov 12 '18 at 16:00
D. StevensD. Stevens
642
answered Nov 12 '18 at 16:00
D. StevensD. Stevens
642
answered Nov 12 '18 at 16:00
D. StevensD. Stevens
642
642
This would be better off as a comment than an answer. Also, your ul does not show triangles.
– Mr Lister
Nov 12 '18 at 17:45
add a comment |
This would be better off as a comment than an answer. Also, your ul does not show triangles.
– Mr Lister
Nov 12 '18 at 17:45
This would be better off as a comment than an answer. Also, your ul does not show triangles.
– Mr Lister
Nov 12 '18 at 17:45
This would be better off as a comment than an answer. Also, your ul does not show triangles.
– Mr Lister
Nov 12 '18 at 17:45
add a comment |
I finally found the problem, which related to inlining critical css using the Drupal CriticalCSS module.
Basically, what happened is that I had generated the critical CSS based on old CSS, and this inline css (the critical CSS) was overriding the working CSS in the file I was editing.
Apparently, Firefox gives priority to the non-inline CSS, while Chrome and Edge prioritize the inline CSS, hence the reason for the difference in what was displayed.
Lesson learned: Make sure any inline CSS is current when editing CSS. (I am looking in to ways to automate that right now.)
answered Nov 14 '18 at 9:28
Patrick KennyPatrick Kenny
501822
add a comment |
I finally found the problem, which related to inlining critical css using the Drupal CriticalCSS module.
Basically, what happened is that I had generated the critical CSS based on old CSS, and this inline css (the critical CSS) was overriding the working CSS in the file I was editing.
Apparently, Firefox gives priority to the non-inline CSS, while Chrome and Edge prioritize the inline CSS, hence the reason for the difference in what was displayed.
Lesson learned: Make sure any inline CSS is current when editing CSS. (I am looking in to ways to automate that right now.)
answered Nov 14 '18 at 9:28
Patrick KennyPatrick Kenny
501822
add a comment |
I finally found the problem, which related to inlining critical css using the Drupal CriticalCSS module.
Basically, what happened is that I had generated the critical CSS based on old CSS, and this inline css (the critical CSS) was overriding the working CSS in the file I was editing.
Apparently, Firefox gives priority to the non-inline CSS, while Chrome and Edge prioritize the inline CSS, hence the reason for the difference in what was displayed.
Lesson learned: Make sure any inline CSS is current when editing CSS. (I am looking in to ways to automate that right now.)
answered Nov 14 '18 at 9:28
Patrick KennyPatrick Kenny
501822
I finally found the problem, which related to inlining critical css using the Drupal CriticalCSS module.
Basically, what happened is that I had generated the critical CSS based on old CSS, and this inline css (the critical CSS) was overriding the working CSS in the file I was editing.
Apparently, Firefox gives priority to the non-inline CSS, while Chrome and Edge prioritize the inline CSS, hence the reason for the difference in what was displayed.
Lesson learned: Make sure any inline CSS is current when editing CSS. (I am looking in to ways to automate that right now.)
answered Nov 14 '18 at 9:28
Patrick KennyPatrick Kenny
501822
answered Nov 14 '18 at 9:28
Patrick KennyPatrick Kenny
501822
answered Nov 14 '18 at 9:28
Patrick KennyPatrick Kenny
501822
answered Nov 14 '18 at 9:28
Patrick KennyPatrick Kenny
501822
501822
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53236284%2fpseudoelement-works-in-firefox-but-not-chrome-why%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Got some HTML for this so we can see the issue for ourselves?
– BoltClock♦
Nov 10 '18 at 5:44
What he said. I whipped together a jsfiddle, but it works as expected in both browsers, so there is something wrong in a part of your code that you're not showing.
– Mr Lister
Nov 10 '18 at 8:23
@BoltClock I've added an example of the failing HTML.
– Patrick Kenny
Nov 12 '18 at 14:14
@MrLister Thanks, I added an example of the failing HTML.
– Patrick Kenny
Nov 12 '18 at 14:14