在标题元素内添加水平线

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

不是最干净的方法......

.test {
  text-align: right;
}

.test h1 {
  font-size: 56px;
  background: white;
  display: inline;
}

hr {
  background: black;
  border: 0;
  height: 2px;
  margin-top: -26px;
  z-index: -1;
  position: relative;
}

.empty {
  display: inline-block;
  padding-left: 1em;
}

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

Answer 2

没有弹性盒！这是兼容和短暂的。

.outterDiv {
  display:inline-block;
  padding: 10px;
}

.titleText {
  margin-left: 30px;
}
.rightSide {
  line-height: 0px;
}
.innerDiv {
  float:left;
  width: 200px;
  height: 1px;
  background-color: black;
  margin-right:30px;
}

<div class="outterDiv">
  <h1 class="titleText">Here's how the magic</h1>
  <div class="innerDiv"></div>
  <h1 class="rightSide">works.</h1>
</div>

Answer 3

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>

Answer 4

这可能是使用flexbox的解决方案：

＆＃13;

＆＃13;

body {
  font-size: 40px;
  font-weight: bold;
}

#firstrow {
  text-align: right;
}

#secondrow {
  display: flex;
  height: 40px;
}

#text {
  flex-grow: 0;
}

＆＃13;

<div>
  <div id="firstrow">
    Here's how the magic
  </div>
  <div id="secondrow">
    <div id="line"></div>
    <div id="text">works</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

这是jsfiddle。