:before 伪元素而不移动实际内容

Question

我希望某个链接元素始终位于下一行，并且在它之前有一个图标，如下所示：

  Lorem ipsum dolor sit amet, consectetur adipiscing      
  imperdiet turpis vulputate vel. Duis erat purus,     
  Maecenas eu odio eget felis commodo lacinia. Sed pellentesque, 
  metus id blandit volutpat, mi nisl egestas lacus, ut
> THIS IS THE LINK

和不这样

  Lorem ipsum dolor sit amet, consectetur adipiscing      
  imperdiet turpis vulputate vel. Duis erat purus,     
  Maecenas eu odio eget felis commodo lacinia. Sed pellentesque, 
  metus id blandit volutpat, mi nisl egestas lacus, ut
  > THIS IS THE LINK

现在当我使用 :before 伪元素时，它可以完成这项工作，但是在更改字体或字体大小时，缩进是错误的。

a:before{
   content:"> ";
   width:0;
}

有人吗？

Answer 1

应该这样做：

Demo Fiddle

a{
   position:relative;
}
a:before{
   content:"> ";
   width:0;
   position:absolute;
   left:-10px;
}

您需要为之前的:psuedo 设置定位，然后将其向左偏移。为了做到这一点，它需要确定自己的相对位置，这就是为什么你还要给'父'a一个位置。

正如 Duroth 所说 - 如果您不希望它看起来占用空间，您也可以将伪位置值指定为 absolute。