html - 如何在 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>