Why can't I save custom CSS pseudo selector in theme settings?

[pixelstorm]

.product-stock-level-wrapper::before {
  content: "";
}

when i put this custom css code in the custom css area in theme settings i get the following error

"Online Store editor session can't be published"

if i remove the 

content: ""; 

the settings are saved. This seems to be a road block in regards to customising a theme.

[ecomheroes_dev]

@pixelstormAdd this CSS in the CSS files that are located in the theme files

[pixelstorm]

That code will be overwritten when the theme updates.

[pawankumar]

Hi,
I hope you are doing good.
It looks like it is known issue to new custom CSS feature.
Unless it is resolved, You can add your style to assets/theme.css
I hope the above is useful to you.
Thanks!

[pixelstorm]

thanks @pawankumar . do you have a link to the "known issue" so i can keep an eye on the progress of the issue?

[pawankumar]

No, I don't have link but I checked on many themes and issue is still there so it is from Shopify side, but I don't have direct link where this issue is mentioned.
Thanks!

[mediafish]

...still an issue today - drove me nuts until I realized I'm not the only one. Code works perfectly until I want to save it. 

Testing it I came to the conclusion that the following line is not supported:  

content: '';

that does not let you save the custom CSS - if you take that off it saves... 

I talked to the support  explaining that it is valid CSS.

I showed him it doesn't work in my Theme; and when he told me it was a Theme problem I installed the Dawn Theme - and it didn't work there either.

He told me he will talk to the Dawn (Shopify) Theme Support and the Theme Support told me: 

• We are unable to give you an answer as of now, but they are already in the known of this. What I am going to do for you would be to give you an update about this via your email...

I will keep you posted - as soo as this is fixed.

[mediafish]

Below is their answer and in the first paragraph my answer to it: 

Bottom line: I never asked for advice on custom code. I only pointed out that: In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
And this CSS pseudo element does not work in Shopify Custom code.
Your developer can simply check that by adding a pseudo element in the custom code and check it such as:
a::before {
content: '';
}
and they will find out that it can't be saved.

Shopify answer: 

Hello Sven, 
 
This is Vel from the Shopify Support team and I appreciate your patience while waiting for Theme Support to look closely into this. 

They check on the issues where you were trying to save the valid CSS on your theme and have shared that as part of our Design time policy it is outside of our scope of support to offer code advice for custom code. While our theme support team can provide guidance and assistance with issues related to our themes, they are not be able to provide support for custom code.
 
Regarding the CCS validator, please note that the link you shared here: https://jigsaw.w3.org/css-validator/#validate_by_input is an external website and is not anything Shopify supported/related. Therefore, it might not be able to validate CCS for Shopify themes and should be considered as a 3rd party source. That being said, the Theme support also likes to share that everything on the Shopify end is working as expected. 
 
This help guide here: Theme Support Shopify can help when explaining our level of support and it does say and explain with this image here:

 
that the arrow above is not supported. 
 
Given these circumstances, I would highly recommend reaching out to the Experts community on Shopify. This way, you can consult with our partners and developers for more guidance on this issue. 

Thank you for your understanding and let me know if you have any further questions or concerns. We are always here to help and support you in any way that we can.

[Emm_]

I have exactly the same problem (it works in the editor but doesn't allow me to save) and would love for Shopify to fix this known issue very soon...

[luxbags]

I have the exact same problem! I'm new to web programming and it's driving me nuts not knowing that is causing the issue. Thank you so much for your post. Any work around so at least I can save some work done?

[pixelstorm]

the best practice here would be to put your css code in the theme.css.liquid (or the file that holds all the styling css / liquid code for your theme. That should fix your problem in the short term. Going forward you will need to copy / paste your custom css code back into your theme.css.liquid if you perform theme updates

[Jamie40]

I'm having same issue - and appreciate your advice. However if i add it to the main theme css liquid, then it applies to all images on the site. And I only want to have this particular style on certain sections.

Does anyone know who is looking to fix this? Is this a Shopify thing? Or something each theme owner needs to fix?

It's so frustrating to see it perfect in preview but unable to save.

Thanks - glad to know I'm not alone. 

[pixelstorm]

Can you not add a custom css class to the section? then use your css selectors to target that specific section

.custom_css_selector .child_selector::after {

}

[Jamie40]

Thank you so much for the reply. I don't see how to add a custom css class to the section.

I'm trying to add opaque background to image with text section, but it won't let me save the custom css with this: content: "Text here";

It will save with the opaque box but not if I include the content class.

[pixelstorm]

you can add a custom css class to your section. https://dynamitefrog.com/posts/shopify-add-class-to-section/

[mwex501]

Hello,

Several posted to this due to the errors relevant to creating custom CSS in the customizer. Shopify published all the limitations relevant to using custom CSS here: https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

I hope this helps!

[mediafish]

Hi, 

Thanks but where do you see the limitation of the content property? I can't find anything about it... 

Also I just tried to add this code and it still does not save. 

.product-stock-level-wrapper::before {
  content: "";
}

[aisaac-curallux]

I think the problem with the content property is the ' " ' character.

Remember that the custom css is going to be reflected on the json file associated with that template, and ".className {content: " ";} would break the json file. 

A possible solution would be escaping the ", (.className {content:\" \";}) but this also fails

I guess this can only be solved by Shopify devs?

[aisaac-curallux]

I'm wrong. content:normal doesn't work. And if you try to edit the template file and escape characters manually the error message is: Invalid property value: content

So should be the "content" rule causing the problem

[mediafish]

Yes that is a confirmed problem... and Shopify told me they look into about a year ago.. 

Just think we should be able to use valid CSS 😉

[Jackary]

Still an issue.

I cant believe we are paying for a service which cant even handle "Custom"

Not to mention... no subcategories.

[theleoad]

I don't know if I'm coming too late to this topic, but since I noticed the problem with pseudo elements, I usually create a Liquid section and place the CSS inside it, when it's a modification only on that page. I think this way it's easier for me to maintain and not need to edit the CSS elsewhere

[vbay-dev]

This is still not fixed and is still an issue.

Can we please update to modern css?

[ma-fa]

Yes, still issue. Is somebody working on this? Or have solution? It's ridiculous. 

[mediafish]

...nobody works on that...and yes it is ridiculous...

[Nitro-QC]

Simple "hack" or workaround i found is to add a Custom Liquid block

- in the Footer group, if it need to be added everywhere

- or in a section in a specific template if it's only needed on a specific page

In this Custom Liquid Section I add my CSS with
<style></style> or {% style %} and {% endstyle %} .

It works 😉

It's also my go-to solution when I exceed the 500 limit.

[Emm_]

OMG yes it works! And such a simple solution as well, thank you @Nitro-QC  !! 😀