我如何才能使伪：before的内容及其父元素缩进？

Question

我有一个HTML标记，其中使用伪h1选择器在每个:before元素之前插入文本章。我还使用了display:block属性，因此标签章出现在单独的行上。但是，当我尝试应用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内容入门应与标签第一起缩进。

Answer 1

您不能将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>

Answer 2

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

• 将章节标题（“入门”）放入其自己的方块中
• 将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>