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

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>