I noticed that the live website version can often be different to preview in Gutenberg. For example, this CSS is added as additional/custom CSS through Styles menu:
.no-link-underline:link { text-decoration: none; } And then the class is applied to Hyperlink Group plugin's as additional class in Advanced settings.
Effect? Underlines are removed on the website, but they still show in the preview editor. A similar thing happens with e.g. custom .list li::before styling that adds an image.
Why is the styling different in the preview? How to avoid that? I tried refreshing browser cache and readding the block, but to no avail.
Additional notes:
- the
.no-link-underlineclass is not listed among classes when inspecting the element in Gutenberg. It is part of the element in HTML while in editor though. And bunch of other custom CSS rules are applied correctly. - I have CSS combining/minifying LiteSpeed Cache plugin (no cache enabled). Disabling it earlier didn't help.
.no-link-underline:linkselects anaelement with such a class (and anhrefattribute). It won’t select any other element that I know of because they can’t be a:link. Have you tried.no-link-underline :linkinstead? That might work because it will select any descendent link of an element with such a class.<a>.!importantthere’s[class][class].no-link-underline:linkwhere you add as many[class]as needed to boost the specificity.