CSS 自定义小方块颜色填充和添加文字

在本文中，我们将介绍如何在HTML和CSS中创建一个颜色填充的小方块，并在方块后面添加一行文字。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

HTML和CSS的基本结构

首先，在HTML中创建一个div元素，用于包裹方块和文字。给这个div元素设置一个唯一的class或id属性，方便在CSS中进行样式设置。接下来，在CSS中，通过选择器选择这个class或id，并对其进行样式设置。

HTML结构示例代码：

<div class="box-container">
  <div class="color-box"></div>
</div>

CSS样式示例代码：

.box-container {
  width: 200px;
  height: 200px;
}

.color-box {
  width: 100%;
  height: 100%;
  background-color: #ff0000; /* 设置方块的填充颜色，这里为红色 */
}

在上面的代码中，我们创建了一个名为box-container的div元素，用于包裹方块和文字。通过CSS样式设置了该容器的宽度和高度为200px。在该容器内部，我们创建了一个名为color-box的div元素，用于表示方块。通过设置width: 100%和height: 100%，使其填充整个容器的空间。通过background-color属性，我们可以设置方块的填充颜色，这里设置为红色(#ff0000)。

在方块后面添加文字

在color-box中添加文字的方法有很多种，这里我们介绍两种常用的方法。

方法一：使用伪元素(::after或::before)

可以使用伪元素(::after或::before)在方块的后面添加文字。具体步骤如下：

在CSS中对color-box选择器进行修改，加入position: relative;属性，为伪元素定位做准备。

.color-box {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #ff0000;
}

使用伪元素(::after)在方块的后面添加文字。

.color-box::after {
  content: "I am a small box!";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 18px;
}

在上面的代码中，我们通过设置伪元素::after的content属性来添加文字内容。通过设置position: absolute;，使伪元素相对于方块进行定位。通过设置top: 50%;和left: 50%;，使伪元素定位于方块的正中间。通过transform: translate(-50%, -50%);，使伪元素进行水平和垂直方向上的偏移，以保证文字居中对齐。通过设置color和font-size属性，可以设置文字的颜色和字体大小。

方法二：使用绝对定位

另一种在方块后面添加文字的方法是使用绝对定位。具体步骤如下：

在CSS中对color-box选择器进行修改，加入position: relative;属性，为文字定位做准备。

.color-box {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #ff0000;
}

创建一个新的div元素，用于表示文字。

<div class="text">I am a small box!</div>

在CSS中对text选择器进行样式设置。

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 18px;
}

通过设置position: absolute;将文字从文档流中脱离，并相对于父元素(color-box)进行定位。同样使用top: 50%;和left: 50%;将其定位于方块的正中间。通过transform: translate(-50%, -50%);进行居中对齐。通过设置color和font-size属性，可以设置文字的颜色和字体大小。