Horizontal Line next to text on black background with html - html

Question

I'm having trouble displaying a white horizontal line in a div with a black background next to a heading.
This is what I've tried:
<div style="background-color: black">
<div style="border-bottom: 2px #ededed solid; overflow: visible; height: 17px; margin: 5px 0 10px 0">
<strong><span style="color: white; padding: 0px 5px; font-size: 2rem; font-family: 'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif">Willkommen</span></strong>
</div>
</div>
Can anyone help?

Answer 1

Please increase the height in second div tag as I believe 17px is too low

Answer 2

One approach would be to use a combination of a pseudo-element and grid. This avoids the need for unnecessary extra markup, and will adapt to any width.
body {
background: black;
}
h1 {
color: white;
font-size: 2rem;
font-family: sans-serif;
text-transform: uppercase;
display: grid;
grid-template: auto / auto 1fr;
grid-gap: 1em;
align-items: center;
}
h1:after {
content: "";
display: block;
background: #ededed;
height: 1px;
margin-top: 0.25em;
}
<h1>Willkommen</h1>
If you have to use inline styles, you'll need to add an additional element like a span to take the place of the pseudo-element, like this:
body {
background: black;
}
<div style="
color: white;
font-size: 2rem;
font-family: sans-serif;
text-transform: uppercase;
display: grid;
grid-template: auto / auto 1fr;
grid-gap: 1em;
align-items: center;">
Willkommen
<span style="
display: block;
background: #ededed;
height: 1px;
margin-top: 0.25em;">
</span>
</div>

Answer 3

you can use text-decoration and text-decoration-color CSS properties for the same.
<div style="background-color: black; padding: 15px 10px">
<div style="overflow: visible; height: 17px; margin: 5px 0 10px 0;">
<strong><span style="text-decoration: overline;text-decoration-color: #ededed ;color: white; padding: 0px 5px; font-size: 2rem; font-family: 'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif">Willkommen</span></strong>
</div>
</div>
another option you can use is <hr/> HTML tag
<div style="background-color: black; padding: 10px 10px 25px 10px">
<div style="overflow: visible; height: 17px; margin: 5px 0 10px 0;">
<hr/>
<strong><span style="color: white; padding: 0px 5px; font-size: 2rem; font-family: 'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif">Willkommen</span></strong>
</div>
</div>
Update as per image-
You can use Sean's answer
another trick you can try with the below style
.line {
white-space: pre;
text-decoration: line-through;
}
<div style="background-color: black; padding: 50px 10px">
<div style="overflow: visible; height: 17px; margin: 5px 0 10px 0">
<strong><span style="color: white; padding: 0px 5px; font-size: 2rem; font-family: 'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif">Willkommen
<span class="line"> </span>
</span></strong>
</div>
</div>