Question

我想知道如何使用css缩进文本而不缩进：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有效......你只需告诉你的伪元素（因为它的绝对定位）就在left: 0;上。

请参阅：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

CSS：Text-Indent和：之前

1 个答案: