Hello!<\/p>\n
I’ve used Shortcoder for a couple of CSS tricks, and I thought I share them.<\/p>\n
Tip 1: arbitary coloured superscipt<\/strong><\/p>\n You want to indicate certain words or phrases. For instance you want to put a blue superscript B to indicate the phrase has biblical origin.<\/p>\n 1. Create a shortcode,say “be” for biblical expression. Now you can write which will put after the word ipsum a space (“\\00a0” in the content property) and a “B”, that is a small (font-size), blue (color) bold superscript (vertical-align).<\/p>\n Note, the chosen html element (“<be\/>” above) may not be a reserved one (thus “<b\/>” will not do).<\/p>\n A second note: since the superscript is produced by CSS content property it is not<\/strong> selectable.<\/p>\n Tip 2: show word-break in a compound string but copy non-word-break string<\/strong><\/p>\n You want show, where the word break is in a compound word. This is not an issue in English, so let’s take a German word for high-way “Auto\/\/bahn”, where you use \/\/ to show the word break.<\/p>\n 1. Reuse the tip 1 above, create a shortcode “wb” for word-break with the content:<\/p>\n where the code “\\002f” stands for forward-slash. Note, that the end of style element and the wb element must be on the same line or you will get an additional space.<\/p>\n
\n2. Put into the content<\/p>\n<style type="text\/css">\nbe::before\n{\n content: "\\00a0B";\n vertical-align: super;\n font-size: smaller;\n font-weight: bold;\n color: #003f87;\n}\n<\/style>\n<be\/><\/code><\/pre>\n
\nLorem ipsum[sc name="be"]<\/code><\/p>\n<style type="text\/css">\nwb::before\n{\n content: '\\002F\\002F';\n}\n<\/style><wb\/><\/code><\/pre>\n