Как сохранить выравнивание объекта по центру текста ⇐ CSS

[Anonymous]

Есть ли способ убедиться, что полоса выделения над заголовком всегда остается на одной линии с началом первого слова? Это работает, когда текст в заголовке выровнен по левому краю, но в этом случае текст должен быть выровнен по центру дизайна. Когда экран сжимается, текст смещается, а полоса остается на месте, она всегда должна следовать за текстом.
Одно из моих требований — обеспечить отзывчивость.


Что я пробовал: я пробовал привязать полосу к первому слову, но в большинстве случаев из-за этого заголовок не отображается должным образом и не реагирует должным образом. Я пытался расположить его относительно/абсолютно и переместить влево на процент, но в основном он остается на месте, а когда текст смещается, полоса не меняется.
обратите внимание, что в этом проекте используется React, MUI.
код для воссоздания:




{dividertype === 'Image' ? (

) : (

)}







{

}






Подробнее здесь: https://stackoverflow.com/questions/793 ... ligned-tex