尝试将文本添加到网格答案

【问题标题】：Trying to add Text to Grid尝试将文本添加到网格
【发布时间】：2020-08-24 18:40:52
【问题描述】：

我确信类似的问题已经被问过几次，我尝试在这里搜索并尝试了一些建议，但我没有任何运气。另外，我是个新手。

简而言之，我想在网格中的每个图像下方添加文本，并且我在每行（3 行）中有 3 个图像。目标是在每张图片的中心下方有一个名字（鸡……是的，我知道，这都是练习 xD）。

.image-container {
  width: 100%;
}

.row-one,
.row-two,
.row-three {
  width: 90%;
  margin: 10px auto;
  text-align: center;
}

.grid-item {
  width: 30%;
  height: 310px;
  display: inline-block;
  margin: 15px;
  background-size: cover;
  background-position: center;
}

#chicken-one {
  background-image: url(blah blah blah link);
}

<section class="ourchicken-section">
  <h3 class="section-title">Our Chickens</h3>
  <div class="image-container">
    <div class="row-one">
      <div class="grid-item" id="chicken-one"></div>
      <div class="grid-item" id="chicken-two"></div>
      <div class="grid-item" id="chicken-three"></div>
    </div>
  </div>
  <div class="image-container">
    <div class="row-two">
      <div class="grid-item" id="chicken-four"></div>
      <div class="grid-item" id="chicken-five"></div>
      <div class="grid-item" id="chicken-six"></div>
    </div>
  </div>
  <div class="image-container">
    <div class="row-three">
      <div class="grid-item" id="chicken-seven"></div>
      <div class="grid-item" id="chicken-eight"></div>
      <div class="grid-item" id="chicken-nine"></div>
    </div>
  </div>
</section>

等等……

我是否应该在 HTML 中添加第二个 div，然后在每个小鸡 div 及其名称下方添加一个 <p> 元素？我试过了，但它会使图像不对齐。

也许我太新了，需要了解更多。

【问题讨论】：

标签： html css flexbox css-grid figure

【解决方案1】：

使用::after 伪元素并说white-space: nowrap; 在网格下方对齐content。

这行得通！

.grid-item::after {
    content: " hi there"; //your text here
    white-space: nowrap;
}

【讨论】：

【解决方案2】：

您正在寻找 css 的 content 和 :after 功能。

content 会将文本或 html 代码添加到您的类或 id。

:after 会在class或id的tag后面加上。值得一提的是，还有一个:before 选项。

#chicken-one:after {
 content: "test";
}
#chicken-two:after {
 content: "test";
}
#chicken-three:after {
 content: "test";
}

或者说，你可以这样做：

.grid-item:after {
 content: "test";
}

【讨论】：