How to achieve an underline style left justified of centered text?

Question

How would I be able to achieve this decoration style look in a full width container? I want it to be positioned left of the start of the text, with a maximum width.

Answer 1

<div>
    <h2 style="margin-bottom: 0; position: relative;display: inline;" >
        BLOG
        <div style="width: 20px;border: 2px solid red;position: absolute;">
        </div>
    </h2>
</div>