如何使伪 :before 的内容与其父元素一起缩进？

Question

我有一个 HTML 标记，我使用伪 :before 选择器在每个 h1 元素之前注入文本 Chapter。我还使用了display:block 属性，以便标签Chapter 出现在单独的行上。但是当我尝试应用text-indent 样式时，只有通过:before 选择器插入的内容会缩进。 h1 元素的内容不会随着文本“Chapter”移动。

这是我原始 HTML 的简化版本。

.chapter{
  background-color:grey;
  height:100px;
  width:200px;
  text-indent:50px;
}
.chapter:before{
  content:"Chapter 1";
  display:block;
}
.l2{
  background-color:red;
  height:100px;
  width:200px;
}
.l3{
  background-color:orange;
  height:100px;
  width:200px;
  clear:both;
}
.container{
  margin:0.3in;
  clear:both;
}

<div class="container">
  <div class="chapter">
    Getting Started
  </div>
  
  <div class="l2">
  Level 2
  </div>

  <div class="l3">
  Level 3
  </div>
</div>

实际结果

只有标签“Chapter”是缩进的。

预期结果

h1 内容Getting Started 应与标签Chapter 一起缩进。

Answer 1

这是其他提供的答案的替代方法，可能有助于解决 cmets 中提到的一些问题...

• 将章节标题（“入门”）放入单独的块中
• 将Chapter 1 前缀附加到.chapter .heading:before 而不是包含块。
• 在章节标题栏上使用position: relative 并将其移动到所需的任何方向。例如：left: 50px。

.chapter {
  background-color: grey;
  height: 100px;
  width: 200px;
}

.chapter .heading {
  position: relative;
  left: 50px;
}

.chapter .heading:before {
  content: "Chapter 1";
  display: block;
}

.l2 {
  background-color: red;
  height: 100px;
  width: 200px;
}

.l3 {
  background-color: orange;
  height: 100px;
  width: 200px;
  clear: both;
}

.container {
  margin: 0.3in;
  clear: both;
}

<div class="container">
  <div class="chapter">
    <div class="heading">Getting Started</div>
  </div>
  
  <div class="l2">
  Level 2
  </div>

  <div class="l3">
  Level 3
  </div>
</div>

Answer 2

您不能将text-indent 用于伪，因为它仅用于文本，而不用于从伪和h1 合并的文本。因此，要解决此问题，您可以在 h1 之前留一个空格来放置 Chapter 文本。希望对您有所帮助

.chapter{
  background-color:grey;
  height:100px;
  width:400px;
  text-indent: 50px;
}
.chapter:before{
  content:"Chapter 1";
  display:block;
}
.l2{
  background-color:red;
  height:100px;
  width:400px;
}
.l3{
  background-color:orange;
  height:100px;
  width:400px;
  clear:both;
}
.container{
  margin:0.3in;
  clear:both;
}

<div class="container">
  <div class="chapter">
    <h1>Getting Started</h1>
  </div>
  
  <div class="l2">
  Level 2
  </div>

  <div class="l3">
  Level 3
  </div>
</div>