在CSS网格间隙之间是否有一种优雅的方式来填充文本？

Question

我有以下html：

<div class="grid-container">
  <div class="grid-row-1">...</div>
  <div class="grid-row-2">...</div>
  ...
</div>

是否有一种优雅的方法可以在这些网格行之间自动填充---AND---，---OR---之类的文本？

编辑：我不是在要求“最佳”方法。在这里，我试图为需要类似参考的人们提供不同的方法。

Answer 1

我不确定这是否优雅，但是否可以使用：

<style>
    .grid-container > .and::after{
        content: "---AND---";
    }
    .grid-container > .or::after{
        content: "---OR---";
    }
</style> 

<div class="grid-container">
  <div class="grid-row-1 and">...</div>
  <div class="grid-row-2 or">...</div>
  ...
  <div class="grid-row-100">...</div>
</div>

或者您可以这样做：

<style>
    .grid-container > div::after{
        content: "---AND---";
    }
    .grid-container > .end::after{
        content: "" !important;
    }

</style> 

<div class="grid-container">
  <div class="grid-row-1">...</div>
  <div class="grid-row-2">...</div>
  ...
  <div class="grid-row-100 end">...</div>
</div>