<header class="header">
  <div class="header__title">
  <div class="header__reference">
    <ul class="reference-list">
      <li><a class="reference-list__link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/:dir">MDN reference</a></li>
      <li><a class="reference-list__link" href="https://caniuse.com/#feat=css-dir-pseudo">caniuse Support</a></li>


  <section class="example">
      In this example, the <code>rtl</code> languages are highlighted:
    <p class="support-warning">It looks like your browser does not suppport this feature. Try viewing it in <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>.</p>
    <div class="example__demo example__demo--dir">
      <p>Pleased to meet you.</p>
      <p lang="ar" dir="rtl">متشرف بمعرفتك</p>
      <p>The weather is nice today.</p>
      <p lang="ar" dir="rtl">מזג האוויר נחמד היום.</p>
// Demo
:dir(rtl) {
  background-color: var(--color-sand);
  border-right: 0.75rem solid var(--color-sand);

// Pen Setup
.example__demo--dir {
  font-size: var(--size-epsilon);
  p {
    color: var(--color-charade);
View Compiled
onload = () => {
  const supportWarning = document.querySelector('.support-warning');

  if (navigator.userAgent.includes("Firefox")) {
    supportWarning.setAttribute('style', 'display: none;');
Run Pen

External CSS

  1. https://codepen.io/ericwbailey/pen/vMXWgz.scss

External JavaScript

This Pen doesn't use any external JavaScript resources.