I am trying to use the pseudo-element ::after to place an icon in a specific area of the page. The CSS I use (which works with every website I've used it on, except for the websites that use cssLint) is as follows:
Every time I try this, it returns the error "Expected RBRACE at line 46, col 35" and changes the CSS to the following:
.gray-text-block::after {content:\"/f086\";}
So, it is adding unnecessary slashes and quotation marks, which obviously breaks this CSS line. This prevents me from using the ::after selector, which seems counterproductive - does CSSLint do this for all pseudo elements? Because pseudo elements are a mainstay for CSS.
Any thoughts on what I can do to fix this? I am using the Wordpress theme Dzen, which uses CSSLint. Thanks!
I am trying to use the pseudo-element ::after to place an icon in a specific area of the page. The CSS I use (which works with every website I've used it on, except for the websites that use cssLint) is as follows:
.gray-text-block::after {content:'\f086'; color: #cdcdcd; font-size: 70px; display: inline-block; position: absolute; right: 0px; bottom: 20px; height: auto; width: auto; font-family: fontawesome; opacity: 0.5; z-index: 2;}
Every time I try this, it returns the error "Expected RBRACE at line 46, col 35" and changes the CSS to the following:
.gray-text-block::after {content:\"/f086\";}
So, it is adding unnecessary slashes and quotation marks, which obviously breaks this CSS line. This prevents me from using the ::after selector, which seems counterproductive - does CSSLint do this for all pseudo elements? Because pseudo elements are a mainstay for CSS.
Any thoughts on what I can do to fix this? I am using the Wordpress theme Dzen, which uses CSSLint. Thanks!