CSS：文本縮進和：之前

Question

我想知道如何縮進文本與CSS縮進：before屬性。我想在前一節中顯示一個三角形，然後縮進文本，使三角形不與文本重疊。

如果我對主元素進行了文本縮進，它也會縮進：before元素。

.header { 
border-bottom: 2px solid red; 
color: blue; 
position: relative; 
} 

.header:before { 
content: ''; 
width: 0; 
height: 0; 
bottom: 0; 
position: absolute; 
border-right: 20px solid transparent; 
border-left: 2px solid red; 
border-bottom: 20px solid red; 
} 

Answer 1

的text-indent作品......你只需要告訴你的僞元素（因爲它是absolutelly放置）上left: 0;。

請參見：

.header { 
 
    border-bottom: 2px solid red; 
 
    color: blue; 
 
    position: relative; 
 
    text-indent: 20px; 
 
} 
 

 
.header:before { 
 
    content: ''; 
 
    width: 0; 
 
    height: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    position: absolute; 
 
    border-right: 20px solid transparent; 
 
    border-left: 2px solid red; 
 
    border-bottom: 20px solid red; 
 
}

<div class="header">test</div>