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

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>