Нельзя назвать данный ответ правильным, но попытка использовать canvas
для этой задачи. Заметьте, что свойства h1
меняются только на время вычисления истинной ширины текста, затем возвращается все на место. H1
сохраняет свойство display:block
, а также текст расположен по центру. При этом подчеркивание только на ширину самого текста.
Для того, чтобы поведение canvas было "естественным", добавляю свойство display:inline
. Так он будет отцентрирован как и остальной текст, но требуется искусственный перенос на следующую строку. И эту проблему я смог решить только с помощью добавления тега <br>
. И вот никак не могу уменьшить его высоту чтобы подчеркивание прижалось к тексту.
const LINE_COLOR = '#ea596e';
let h1 = document.querySelector('h1');
let canvas = document.querySelector('canvas');
canvas.width = 0;
canvas.height = 0;
let display = window.getComputedStyle(h1).getPropertyValue("display");
let align = window.getComputedStyle(h1).getPropertyValue("text-align");
h1.style.textAlign = 'left';
h1.style.display = 'inline-block';
let rect = h1.getBoundingClientRect();
h1.style.textAlign = align;
h1.style.display = display;
let w = canvas.width = rect.width;
let h = canvas.height = 5;
let ctx = canvas.getContext('2d');
ctx.fillStyle = LINE_COLOR;
ctx.fillRect(20,2,w-40,1);
ctx.fillRect(w/4,0,w/2,h);
<h1 style="text-align:center">What an awsome solution!
<br>
<canvas style="display:inline"></canvas>
</h1>
Добавляю и "улучшенный" вариант с текстом, заключенным в span
. Вместо br
использую div
с отрицательным margin-top
. Теперь не надо играть свойствами h1
чтобы получить ширину текста. Код проще.
Свойство display:inline
для canvas
, похоже смысла не имело, убираю лишнее.
const LINE_COLOR = '#ea596e';
let h1_span = document.querySelector('h1 > span');
let canvas = document.querySelector('canvas');
let w = canvas.width = h1_span.getBoundingClientRect().width;
let h = canvas.height = 5;
let ctx = canvas.getContext('2d');
ctx.fillStyle = LINE_COLOR;
ctx.fillRect(w/8,2,w-w/4,1);
ctx.fillRect(w/4,0,w/2,h);
<h1 style="text-align:center">
<span>What an awsome solution!</span>
<div style="margin-top: -16px"></div>
<canvas></canvas>
</h1>