css - CSS:文字缩进和:Before

我想知道如何使用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;
}

最佳答案

text-indent的工作原理...您只需要告诉伪元素（因为它的位置是绝对的）就可以放在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>

关于css - CSS:文字缩进和:Before，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26406459/