Добавьте одну точку под каждым символом, используя CSS

Я ищу способ создания следующего эффекта с помощью CSS.

Я нашел несколько решений для размещения точек под текстом (белые точки ниже HTML-текста), но я не хочу "пунктирной подчеркивания", я хочу, чтобы каждый символ чтобы иметь только одну точку ниже нее. Кроме того, точка должна увеличиваться с размером шрифта текста (хотя, если это необходимо, я мог бы побеседовать с JS, чтобы исправить это).

Как я мог достичь этого?

Ответ 1

Вы не можете стилизовать непрерывный блок текста на основе каждого символа с помощью CSS.

(Возможно, в будущем это может быть подтверждено, как отмечает @Oriol в своем ответе. Я имею дело только с текущей ситуацией.)

Вы можете создать свой код на основе каждого элемента, поэтому, если вы вложите каждый из ваших символов в отдельный элемент (с классом char), вы можете добавить точку, используя что-то вроде:

.char {
    display: inline-block;
    position: relative;
}
.char::before {
    content: '.';
    display: inline-block;

    /* position the dot underneath the character */
    position: absolute;
    bottom: -0.5em;
    left: 0;

    /* center the dot horizontally */
    text-align: center;
    width: 100%;

    /* ... (style the dot to your liking) */
}

Это сделало бы DOM невероятно грязным, но это соответствовало бы вашим требованиям (масштаб с размером шрифта и т.д.).

Ответ 2

Модуль CSS Text Decoration Module Level 3 определяет эти свойства:

text-emphasis-style

Это свойство применяет метки подчеркивания к тексту элемента. [...]
Маркеры рисуются один раз для каждого символа.
text-emphasis-position

Это свойство описывает, где выделены метки подчеркивания.

Когда браузеры поддерживают это, вы сможете использовать

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

Ответ 3

Просто сводка обоих решений выше:

1. Используя современный CSS, который устанавливает точку под каждой буквой

HTML:

0,<span class="dotunderletter">1</span> = 
<br>
0,<span class="dotunderletter">01</span> = 
<br>
0,001 = 1 · 1/1.000 =

CSS:

.dotunderletter {
    text-emphasis-style: dot;
    text-emphasis-position: under left;
    -webkit-text-emphasis-style: dot;
    -webkit-text-emphasis-position: under;
}

Результат:

Проблема: изменяется высота строки.

2. Использование CSS перед элементом для каждого отдельного char

HTML:

0,<span class="char">1</span> = 
<br>
0,<span class="char">0</span><span class="char">1</span> =
<br>
0,001 = 1 · 1/1.000 =

CSS:

.char {
    display: inline-block;
    position: relative;
}
.char::before {
    content: '.';
    display: inline-block;
    position: absolute;
    bottom: -0.5em;
    left: 0;
    text-align: center;
    width: 100%;
}

Результат:

Проблема: каждый char должен быть помещен в элемент span. Но высота строки не изменяется, и она работает в большинстве браузеров.

Благодаря hon2a и Oriol за их полезные ответы!