如何在前两个元素的某些内容之前添加空间并将其隐藏

Question

我有三个这样的元素：

<div class="mainLinks> 
  <a>A</a> 
  <a>B</a> 
  <a>ABC</a>
</div>  

我想在字符前面的前两个元素中添加空格。以下是我要尝试执行的操作，但该样式未得到应用。但只有a:before样式适用于显示的字符。我尝试过content: " ";，但也无法正常工作。

.mainLinks  a:nth-child(-n+3){
  content: " ";
}


.mainLinks  a:before{
  content: " ";
}

Answer 1

您可以添加一个文字空间并保留空白。

参见下文：

.mainLinks a::before {
  content: " ";
  white-space: pre;
}

.mainLinks a:last-child::before {
  display: none;
}

<div class="mainLinks"> 
  <a>A</a>
  <a>B</a>
  <a>ABC</a>
</div>