我可以在 css 中创建这一行吗？

Question

我不想为这条绿线使用很多 svg 文件。我可以用左边框之类的东西做这个吗？

<Image src={greensvg} />
              <p>
                A minimum of 5 years designing experiences and products in a
                professional setting.
              </p>

<Image src={greensvg} />
              <p>
                A minimum of 5 years designing experiences and products in a
                professional setting.
              </p>

<Image src={greensvg} />
              <p>
                A minimum of 5 years designing experiences and products in a
                professional setting.
              </p>

Answer 1

您可以使用伪 class :before 实现缩进列表效果。像这样：

ul {
  margin: 0;
}

ul.dashed {
  list-style-type: none;
}

ul.dashed>li:before {
  content: "-";
  margin-right: 5px;
  color: green;
}

<ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

希望它能回答您的问题。

Answer 2

p {
  padding-left: 20px;
  position: relative;
}

p:before {
  content: '';
  display: block;
  width: 15px;
  border-bottom: 3px solid green;
  position: absolute;
  left: 0;
  top: 4px;
}

<p>
  A minimum of 5 years designing experiences <br />and products in a professional setting.
</p>

试试这个是否适合你，你可以用这种方式调整元素的宽度。

我可以在 css 中创建这一行吗？

Can I create this line in css?

css

sass

css-selectors