Can't use css property content: "" in page CSS (quotes seem to be escaped)
Hi,
I am attempting to add custom CSS to a page consisting of :before & :after pseudo elements in BeBuilder. It appears that something is attempting to escape or sanitize my quotes (") or single quotes (') on the content property. Since the content value must be set to a value, this is causing the web browser to be unable to render :before and :after pseudo elements.
Below is an example of what I mean:
.example:before {
content: "";
color: red;
}
BeBuilder's output to browser:
.example:before {
content: ' '
color: red;
}
The above output is causing the CSS to be invalid.
How can we fix this?
Thanks!
Comments
Hi,
Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please ensure the page is not under maintenance before you provide us with the link.
It is always a good idea to attach a screenshot showing your issue.
Thanks
https://ancestorsalive.com/speaker-information/checklist/
The element would be span tag with the .due_date class.
Screenshot here: https://ibb.co/MsBz6Tx
Here's an updated screenshot. Doesn't really change anything, but I realized that I had content in the property when I took the original screenshot, and this isn't/won't be the case.
https://ibb.co/q7xJQ4H
There is a bug in BeBuilder that changes special characters to HTML entities, and that is why your code does not work. I have passed this info to the dev team.
For now, please edit your page with BeBuilder Blocks, and paste your code there.
Best regards
Thank you for passing this on!