时间戳

首页 > 解决方案 > CSS 3 伪元素

html - CSS 3 伪元素

问题描述

我试图在不使用任何图像的情况下通过纯 CSS 来实现这一点（附加图像）。任何人都可以在这里帮助我吗？

谢谢。

标签： htmlcss

解决方案

要实现这一点，您应该制作一个主包装div并在其中创建 3 个不同的元素，并使用自定义和span装饰它。为了使它们排成一行，您可以使用不同的方式，但我建议使用 flexbox，就像我在以下代码段中所做的那样：background-colorheightwidth

div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

div > span {
  height: 10px;
  width: 30px;
  border-radius: 100px;
}

div > span:not(:last-of-type) {
  margin: 0 10px 0 0;
}

div > span.purple {
  width: 100px;
  background-color: #6f2580;
}

div > span.green {
  background-color: #16968d;
}

div > span.pink {
  background-color: #c4297e;
}
<div>
  <span class="purple"></span>
  <span class="green"></span>
  <span class="pink"></span>
</div>

编辑：这里有一个例子，每个虚线都有一个标题。

div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

div > h4 > span {
  display: block;
  height: 10px;
  width: 30px;
  border-radius: 100px;
}

div > h4:not(:last-of-type) {
  margin: 0 10px 0 0;
}

div > h4 > span.purple {
  width: 100px;
  background-color: #6f2580;
}

div > h4 > span.green {
  background-color: #16968d;
}

div > h4 > span.pink {
  background-color: #c4297e;
}
<div>
  <h4>title
    <span class="purple"></span>
  </h4>
  <h4>title
    <span class="green"></span>
  </h4>
  <h4>title
    <span class="pink"></span>
  </h4>
</div>

推荐阅读