html - 在标题元素内添加水平线

Question

我想复制这个:

所以我试过这个:

.test {
		position:relative;
		width:100%;
		margin:0 auto;

			}

	.test hr {
		display:inline;
		width:40%;
		float:left;
		border:2px solid black;
	}

	.test h1 {
		display:inline;
		float:right;
		font-size:56px;
	}

<div class="test">
	<hr />
	<h1>Here is how the magic <br/> works.</h1>

</div>

如您所见，还差得远。

我该怎么做？

Answer 1

一个内部 span，一个伪元素和 span 的背景颜色(您指定的始终为白色)

h1 {
  width: 80%;
  margin: 1em auto;
  text-align: right;
  position: relative;
  overflow: hidden;
}

.narrow {
  width: 50%;
}

.thin {
  width: 50%;
  font-size: 16px;
}

span {
  background: white;
  position: relative;
  z-index: 2;
  padding-left: ..5em;
}

h1::after {
  content: "";
  width: 100%;
  height: 2px;
  background: currentcolor;
  position: absolute;
  left: 0;
  bottom: .5em;
}

<h1><span>This is how the magic works</span></h1>


<h1 class="narrow"><span>This is how the magic works</span></h1>

<h1 class="thin"><span>This is how the magic works, no really it does with any font-size!</span></h1>