时间戳

首页 > 解决方案 > 在 HTML/CSS 中附加一个小方块的大方块

html - 在 HTML/CSS 中附加一个小方块的大方块

问题描述

我正在尝试制作一个正方形，并附上另一个正方形但更小。它将文本放在大方块中，将图标放在小方块中的想法（我在最后放了一个示例图像）。

我使用的是 bootstrap 4，所以它使用 html 和 css 构建它的想法不仅是放置图像，还具有 BS4 的响应功能和整个网页的一致性。

预先感谢您的任何帮助！

大方块连着一个小方块

标签： htmlcssbootstrap-4

解决方案

你熟悉 ::before 和 ::after 伪类吗？

你可以做这样的事情。这假定您的大盒子上所有预先存在的样式，您还需要为 ::after 元素添加背景颜色和大小，以使其看起来完全符合您的要求，但就定位而言，这是它可以工作的方式. 下面有一些很棒的附加资源，来自一个名叫 Kevin Powell 的好人，介绍了 ::before 和 ::after 的强大而令人印象深刻的功能。

.big-box {
  position: relative;
}

.big-box::after {
  content: url(<icon-image>);
  position: absolute;
  left: 100%;
  top: 15%;
}

伪元素之前和之后 1 https://www.youtube.com/watch?v=zGiirUiWslI

伪元素 2 之前和之后 https://www.youtube.com/watch?v=xoRbkm8XgfQ

伪元素 3 之前和之后 https://www.youtube.com/watch?v=djbtPnNmc0I

推荐阅读