Add a single dot below each character using CSS

Question

I am looking for a way to create the following effect with CSS.

I found some solutions for putting dots below the text (white dots below HTML text), but I don't want "dotted underlining", I want every character to have just a single dot below it. Also the dot should increase with the font-size of the text (although if needed, I could mess with JS to fix that).

How could I achieve that?

Answer 1

CSS Text Decoration Module Level 3 defines those properties:

• text-emphasis-style

  This property applies emphasis marks to the element's text. [...]
  The marks are drawn once for each character.

• text-emphasis-position

  This property describes where emphasis marks are drawn at.

When browsers support that, you will be able to use

text-emphasis-style: dot;
text-emphasis-position: under left; /* or `under right` */

body {
  text-emphasis-style: dot;
  text-emphasis-position: under left;
  -webkit-text-emphasis-style: dot;
  -webkit-text-emphasis-position: under;
  font-size: 300%;
}

ieuw

However, it is not widely supported yet. See caniuse for full details.

Firefox supports it since version 46, or since version 45 if you enable layout.css.text-emphasis.enabled flag.

Chrome supports it since version 25, but needs the -webkit- vendor extension.

Note the standard text-emphasis-position uses a 2-value syntax (for horizontal and vertical writing modes, respectively), but there is a suggestion to allow 1-value syntax too. However, -webkit-text-emphasis-position doesn't allow the 2-value syntax, only the 1-value one.