css用伪元素在盒子里面添加盒子

CSS伪元素（Pseudo-elements）是一种特殊的选择器，它允许你在元素的内容前面或后面插入虚拟内容，而无需实际增加HTML标记。如果你想在某个框内（如`<div>`）使用伪元素添加另一个小盒子，可以使用`:before`或`:after`伪元素配合CSS定位。

例如，下面是一个简单的例子：

.parent-box {
  position: relative; /* 需要设定position以便影响伪元素的位置 */
  content: ""; /* 确保伪元素存在 */
}

.parent-box::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%; /* 小盒的宽度 */
  height: 50%; /* 小盒的高度 */
  background-color: #f00; /* 可自定义样式 */
}

/* 如果你想在底部添加，只需将top改为bottom，并调整其他属性 */
.parent-box::after {
  bottom: 0;
}

在这个示例中，`.parent-box` 的伪元素 `::before` 和 `::after` 分别会在盒子内部生成两个大小为50%、颜色为红色的小盒子，分别位于盒子的左上角和右下角。你可以根据需要修改这些样式来定制你想要的效果。