Как сверстать данный элемент?

Question

Как сверстать такой элемент, чтобы линия была на всю ширину?

Answer 1

Вот так

.test {
  text-align: center;
  position: relative;
}
.test:after {
  content: "";
  display: block;
  height: 2px;
  background-color: #555555;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 1;
}
.test span {
  border-radius: 6px;
  background-color: #555555;
  color: #ffffff;
  display: inline-block;
  padding: 0 15px;
  position: relative;
  z-index: 2;
}

<div class="test"><span>TEST</span></div>

Answer 2

Десяток вариантов можно использовать, но попробуйте например так:

hr {
  width: 100%;
  height: 3px;
  background-color: black;
  border: 0px;
}
span {
  display: block;
  position: absolute;
  width: 100px;
  background-color: black;
  color: white;
  margin-top: -28px;
  margin-left: -50px;
  padding: 10px;
  left: 50%;
  text-align: center;
  border-radius: 10px;
}

<br />
<br />
<br />
<hr />
<span>Text</span>

Answer 3

div {
 position: relative;
 text-align: center;
}
div::before {
 content: "";
 position: absolute;
 width: 100%;
 top: 50%;
 left: 0px;
 transform: translateY(-50%);
 border: 1px solid rgb(48,48,48);
}
div::after {
 content: attr(title);
 background-color: rgb(48,48,48);
 padding: 10px;
 display: inline-block;
 color: white;
 position: relative;
 z-index: 1;
 border-radius: 6px;
 min-width: 150px;
}

<div title="TEST"></div>