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

我有以下三个元素：

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

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

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


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

最佳答案

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

见下文：

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