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>