Pseudo Class Support in ADF

Question

In my skin file (which is extending Skyros), I've defined a rule as

.arrow_box:after {
    /*some css rules */
}
.arrow_box:before {
    /*some css rules */
}

The main aim is to create an arrow on the top of the box just like the one shown at CSSArrowPlease.

The Issue

When I run the page, the pseudo classes aren't being applied because they are getting changed into:

.arrow_box.p_AFAfter, .x1z2.p_AFAfter {
    /*some css rules */
}
.arrow_box.p_AFBefore, .x1z2.p_AFBefore {
    /*some css rules */
}

Notice how the : is converted into .p_AFAfter and .p_AFBefore. How would I avoid this?

I also tried escaping the selector:

.arrow_box\:after {
  /*some css rules */
}

But that got translated into

.arrow_box\.p_AFAfter, .x1z2.p_AFAfter {
    /*some css rules */
}

Any workaround to this? My jDeveloper version is 11.1.1.9.0

PS

DISABLE_CONTENT_COMPRESSION is not an option since I don't have control over the web.xml file on the server.

Answer 1

You must understand that skin file is not really css file. It is skin file that processed by skinning engine. And you have to use it, when addressing components styles.
However if all that you need is just custom css, you can create simple css file and include it in your page. You can still keep it in skin project or create it in your web project.

This file won't be modified by skin engine and you will get all your styles as it is. But you won't be able to refer component styles and have to explictly provide css class names for components in styleClass property.