Title: [TIPS] Shortcode for CSS
Last modified: April 8, 2018

---

# [TIPS] Shortcode for CSS

 *  [Juha Metsäkallas](https://wordpress.org/support/users/juhametsakallas/)
 * (@juhametsakallas)
 * [8 years, 1 month ago](https://wordpress.org/support/topic/tips-shortcode-for-css/)
 * Hello!
 * I’ve used Shortcoder for a couple of CSS tricks, and I thought I share them.
 * **Tip 1: arbitary coloured superscipt**
 * 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.
 * 1. Create a shortcode,say “be” for biblical expression.
    2. Put into the content
 *     ```
       <style type="text/css">
       be::before
       {
         content: "\00a0B";
         vertical-align: super;
         font-size: smaller;
         font-weight: bold;
         color: #003f87;
       }
       </style>
       <be/>
       ```
   
 * Now you can write
    `Lorem ipsum[sc name="be"]`
 * 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).
 * Note, the chosen html element (“<be/>” above) may not be a reserved one (thus“
   <b/>” will not do).
 * A second note: since the superscript is produced by CSS content property it is**
   not** selectable.
 * **Tip 2: show word-break in a compound string but copy non-word-break string**
 * 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.
 * 1. Reuse the tip 1 above, create a shortcode “wb” for word-break with the content:
 *     ```
       <style type="text/css">
       wb::before
       {
         content: '\002F\002F';
       }
       </style><wb/>
       ```
   
 * 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.
 * 2. There is a less-known CSS property called “user-select”. You might want to
   take a look at a [post](https://css-tricks.com/almanac/properties/u/user-select/)
   at CSS-tricks.com. Combine these
 * `<span style="user-select: all;">Auto[sc name="wb"]bahn</span>`
 * What the user sees is “Auto//bahn”, but when s/he clicks on either Auto or bahn
   the word Autobahn without the double slash gets selected, thus copyable into 
   a search field or into user’s notes.
 * See CSS-tricks.com for browser differences.
 * I hope you get the idea and find these tips useful.
    -  This topic was modified 8 years, 1 month ago by [Juha Metsäkallas](https://wordpress.org/support/users/juhametsakallas/).
    -  This topic was modified 8 years, 1 month ago by [Juha Metsäkallas](https://wordpress.org/support/users/juhametsakallas/).
    -  This topic was modified 8 years, 1 month ago by [Juha Metsäkallas](https://wordpress.org/support/users/juhametsakallas/).
    -  This topic was modified 8 years, 1 month ago by [Juha Metsäkallas](https://wordpress.org/support/users/juhametsakallas/).

Viewing 1 replies (of 1 total)

 *  Plugin Author [vaakash](https://wordpress.org/support/users/vaakash/)
 * (@vaakash)
 * [8 years ago](https://wordpress.org/support/topic/tips-shortcode-for-css/#post-10299194)
 * Awesome [@juhametsakallas](https://wordpress.org/support/users/juhametsakallas/)!
   
   Thanks for the tips !

Viewing 1 replies (of 1 total)

The topic ‘[TIPS] Shortcode for CSS’ is closed to new replies.

 * ![](https://ps.w.org/shortcoder/assets/icon.svg?rev=2222236)
 * [Shortcoder — Create Shortcodes for Anything](https://wordpress.org/plugins/shortcoder/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/shortcoder/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/shortcoder/)
 * [Active Topics](https://wordpress.org/support/plugin/shortcoder/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/shortcoder/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/shortcoder/reviews/)

 * 1 reply
 * 2 participants
 * Last reply from: [vaakash](https://wordpress.org/support/users/vaakash/)
 * Last activity: [8 years ago](https://wordpress.org/support/topic/tips-shortcode-for-css/#post-10299194)
 * Status: not a support question