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

Question

我有一个HTML标记，我使用伪:before选择器在每个h1元素之前注入文本Chapter。我还使用了display:block属性，以便标签Chapter显示在单独的一行上。但是，当我尝试应用text-indent样式时，只有通过:before选择器插入的内容是缩进的。CCD_ 6元素的内容不随文本"0"一起移动；第章">

这是我原始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>

实际结果

只有标签"；章节"；缩进。

预期结果

h1内容入门应与标签章节一起缩进。

Answer 1

以下是其他提供的答案的替代方案，可能有助于解决评论中提到的一些问题。。。

• 将章节标题("入门"(放入自己的块中
• 将Chapter 1前缀附加到.chapter .heading:before，而不是包含块
• 使用章节标题栏上的position: relative，并将其沿所需的任何方向移动。例如：CCD_ 10

.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用于您的pseudo，因为它只用于一个文本，而不用于从pseudo和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>