When em Is Not Passive-Aggressive Enough

Most websites are perfectly content with the usual tools for emphasis: <em> for emphasis and <strong> for strong emphasis. But sometimes standard HTML simply doesn’t capture the tone you’re aiming for. Especially true when that tone is somewhere between mildly annoyed and theatrically unimpressed.

This tutorial explores a far more expressive option: a custom <sarcasm> element, designed to make your text lean backwards both visually and emotionally. Because sometimes <em> just isn’t passive-aggressive enough.

Let’s build a <sarcasm> element that looks like italic text… but emotionally leans backwards.

Step 1: Create a custom HTML element

HTML allows you to define custom elements without any special setup. You can simply start using them in your content

<sarcasm>This is fine.</sarcasm>

Browsers will treat unknown elements as inline elements by default, just like a <span>.

Step 2: Add the CSS (the Joomla way)

In Joomla, custom styling should not be added to core files or template framework files. Instead, it should be placed in a file called user.css inside your active template.

This ensures your changes survive updates and remain isolated from template overrides.

Step 3: Check if user.css exists

Go to:

• System → Site Templates
• Select your active template
• Click Edit Files

Then navigate to: /media/templates/site/YOUR_TEMPLATE/css/ and look for a file called user.css.

Step 4: Create user.css if it doesn’t exist

If the file is missing:

• Open your template in System → Site Templates
• Select your template
• Use New File
• Set file type to CSS
• Name it user inside the css/ folder

Joomla will then automatically load it after the template’s main styles.

Step 5: Add the sarcasm styling

Open user.css and add the following:

sarcasm {
  display: inline-block;

  /* Backwards emotional lean */
  transform: skewX(-12deg);

  color: #444;
}

The key effect here is skewX(-12deg), which makes the text lean backwards instead of forwards.

Step 6: Use it in your content

Now you can use it anywhere in Joomla content if you don't mind switching to code view (or disabling the wysiwyg editor) and manually adding the markup:

<p>
  I absolutely <sarcasm>enjoy</sarcasm> debugging CSS in production.
</p>

Step 7: Optional enhancements

Hover effect

sarcasm:hover {
  transform: skewX(-15deg);
  color: #000;
}

Important reality check

• <sarcasm> is valid HTML5 as an unknown element
• It is not a standard Web Component (no hyphen, no customElements.define)
• Joomla will render it without issue
• Styling via user.css keeps it upgrade-safe

Final result

<p>
  This is <sarcasm>definitely a stable deployment strategy</sarcasm>.
</p>

This is definitely a stable deployment strategy

Visually, it’s italic text that leans backwards. Emotionally, it depends on your deployment confidence.

You might not be quite as sarcastic as I am, so you may never feel the need to reach for a <sarcasm> tag in your day-to-day work. And that’s perfectly fine. But like all the best bits of markup, it’s good to have in your arsenal anyway, quietly waiting for the moment when standard HTML simply doesn’t carry the right emotional weight.

If that day ever comes, you’ll know exactly what to do.