write CSS to style list items as shown in image-CodePudding

I have no idea about CSS, please help me to write CSS to make look the list items as in the image. These are 3 list items here but it's dynamic. I tried to play around with but it's the last time I am working with CSS so I do not want to put too much into it, what looks like fairly simple task. Please help.

This is how I want it to look

CodePudding user response：

Something like this: It will look more like you want it when the fonts from your site are applied

.lines, .line{
display:flex;
}

.lines{
flex-direction: column;
gap: 10px;
}

.line{
align-items: center;
gap: 5px;
}

.number{
padding: 3px 10px;
border-radius: 10px;
background-color: #15dfc8;
}

<div >
  <div >
    <div >45</div>
    <div >Fit (Very Good)</div>
  </div>

  <div >
    <div >46</div>
    <div >Fit (Very Good)</div>
  </div>

  <div >
    <div  style="background-color: lightgray;">47</div>
    <div >Fit (Good)</div>
  </div>
</div>

CodePudding user response：

To style list items as shown in the image, you can use the following CSS:

li {
  list-style-type: none; /* remove the default bullet points */
  font-size: 20px; /* increase the font size */
  color: #333; /* set the text color to dark grey */
  line-height: 2; /* increase the line height */
  margin-bottom: 10px; /* add some space between list items */
}

li:before {
  content: "▹"; /* use a right-pointing triangle as the list item marker */
  color: #1e90ff; /* set the marker color to blue */
  font-size: 25px; /* increase the marker size */
  margin-right: 10px; /* add some space between the marker and the text */
}

You can apply this CSS to your HTML by adding a class or ID to your element and then selecting it in your CSS. For example:

<ul >
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

and

.styled-list li {
  list-style-type: none;
  font-size: 20px;
  color: #333;
  line-height: 2;
  margin-bottom: 10px;
}

.styled-list li:before {
  content: "▹";
  color: #1e90ff;
  font-size: 25px;
  margin-right: 10px;
}

I hope this helps! Let me know if you have any questions.

CodePudding user response：

li{ display: flex; list-style: none; } .style{ padding: 3px 10px; border-radius: 10px; background-color: #15dfc8; margin-right:20px; }