如何使伪:在缩进前，以及它的父元素的内容？
如何使伪:在缩进前，以及它的父元素的内容？
提问于 2019-10-30 03:15:59
我有一个HTML，在这个标记中，我使用伪选择器在每个h1元素之前注入文本h1章节。我还使用了display:block属性，以便标签章节出现在单独的行中。但是，当我尝试应用text-indent样式时，只有通过:before选择器插入的内容才会缩进。h1元素的内容不与文本“章节”一起移动。
这里是我原来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 content with 应该与标签章节一起缩进。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-10-30 07:25:37
这里有一个替代其他提供的答案，可能有助于解决评论中提到的一些问题。
- 将章节标题(“入门”)放入自己的块中，
- 将
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>
Stack Overflow用户
发布于 2019-10-30 03:32:03
您不能将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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58618265
复制相关文章
相似问题
腾讯云开发者
