6 replies

1. iamdtms 12 min later

   @zachleat <toc> reminds me to the army days :)
   https://codepen.io/iamdtms/pen/dydmjme

   1. Zach Leatherman 15 min later

      @iamdtms well that’s lovely!

   2. Curtis Wilcox 22 hr later

      @iamdtms
      Nice! In 2022, putting the dots on their own aria-hidden element was a good improvement. These days, it's no longer necessary (depending on your level of support for older browsers), `content` can have alternative text, including `""` for decorative content.

      https://codepen.io/ccwilcox/pen/MYpJrYg?editors=1100
      @zachleat

      1. iamdtms 23 hr later

         @cwilcox808 @zachleat Content works. This concept is not about accessibility. Thank you.

         1. Curtis Wilcox 1 day later

            @iamdtms
            I was just pointing out an option available now that avoids adding unnecessary HTML elements and uses less code overall.

            Yours is forked from a version that had the pseudo-elements attached to `<span class="title">`. Yours had them attached to an added element, `<span class="leaders" aria-hidden="true"></span>`. The only reason to make that change is to prevent the dots from being read by screen readers.
            My fork goes back to attaching them to `.title` and using `/ ""` within the `content` to prevent the dots from being read by screen readers.
            @zachleat

            1. iamdtms 1 day later

               @cwilcox808 @zachleat MVC is often interoperable.

               ```
               Page&amp;nbsp;
               ```

               Could have been a

               ```
               padding-inline-end: 1ch;
               ```

               For the record, and #css content "..." is fitting markup-saving each and every line. It's special.