如何在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 > div:last-child::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">...</div>
</div>