Can I create this line in css?-CodePudding

I don't want to use many svg files for this green line. can I make this with like border-left or something ?

<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>

CodePudding user response：

You can have indented list effect with pseudo class :before. Something like this:

ul {
  margin: 0;
}

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

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

<ul >
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

Hope it answers your question.

CodePudding user response：

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>

Try out if this works for you, you can play with the width of the element in this way.