How to write custom css?

How to write custom css?

Hello!

I want to use Shortcoder to put out custom css. Let me explain.

I have in the template's Additional CCS a style definition to put out a superscript P:

Code: Select all

pk::before { content: " P"; vertical-align: super; font-size: smaller; font-weight: bold; color: #003f87; }
I can write in the editor in the text mode

Code: Select all

lorem ipsum<pk/>
to produce the effect I want. But ,as you certainly know, my tag gets stripped, if I ever switch to the visual mode.

I created a shortcode "pk" with the content "<pk/>" and now I can write

Code: Select all

lorem ipsum[sc name="pk"]
which is preserved between text and visual modes.

Then I realised, that I could put CSS definition directly into the content of the shortcode instead of creating an html tag. But if I put it directly, then the CSS definition gets displayed and not the superscript P. Do I need to wrap my CSS definition into ,say, a span tag or how can I accomplish my goal?

TIA