定位带有下方文字的标题，加上背景颜色问题

Question

我有一个标题和下面有文字的页面。造型的想法如下：

• 标题和下面的文字与左侧对齐
• 标题有背景颜色设置，仅从屏幕左侧填充
• 两个文本都在水平居中的包装中

像这样：

与屏幕尺寸无关，标题的背景颜色始终从左侧屏幕边缘开始。

我不知道如何将两个文本保持在左侧对齐并标注标题的背景。即使有绝对定位，这似乎也很糟糕。

有什么好主意吗？

基本小提琴here。

<div class="wrapper">
  <h1>Fancy headline<br> of doom</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>


body {
  font-family: sans-serif;
}

.wrapper {
  max-width: 500px;
  margin: 20px auto 0 auto;
}

h1 {
  background-color: #3f72a7;
  display: inline;
  padding: 5px;
  color: white;
}

Answer 1

考虑使用伪元素来创建溢出部分：

body {
  font-family: sans-serif;
}

.wrapper {
  max-width: 500px;
  margin: 20px auto 0 auto;
}

h1 {
  background-color: #3f72a7;
  display: inline;
  padding: 5px;
  color: white;
  position: relative;
}

h1:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  left: -10000px;
  background-color: #3f72a7;
}

<div class="wrapper">
  <h1>Fancy headline<br> of doom</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>