Within my skin file (which is an extension of Skyros), I have defined a rule as:
.arrow_box:after {
/*insert some css rules here*/
}
.arrow_box:before {
/*insert some css rules here*/
}
The goal is to generate an arrow on the top of the box similar to what is displayed on CSSArrowPlease.
The Problem
Upon running the page, the pseudo classes are not being applied because they are being transformed into:
.arrow_box.p_AFAfter, .x1z2.p_AFAfter {
/*insert some css rules here*/
}
.arrow_box.p_AFBefore, .x1z2.p_AFBefore {
/*insert some css rules here*/
}
The colon ":" is being converted to ".p_AFAfter" and ".p_AFBefore". How can this be prevented?
I attempted to escape the selector with:
.arrow_box\:after {
/*insert some css rules here*/
}
However, this resulted in:
.arrow_box\.p_AFAfter, .x1z2.p_AFAfter {
/*insert some css rules here*/
}
Is there a workaround for this issue? My jDeveloper version is 11.1.1.9.0
Note
DISABLE_CONTENT_COMPRESSION is not feasible as I lack control over the web.xml file on the server.