Give numbers with vertical line to list items in responsive way (HTMl & CSS)

Question

I want to create a list using HTML & CSS shown as below:
Expected Output: But getting below output.
Actual Output: As you see, the line is collapsing on text and numbers. I want text besides of vertical line. And line should be on backward of number element. Also, the output is not responsive. Please help me to create responsive code for the expected output shown in above image with html & css.

.info-timeline ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.number{
    background-color: #0097b2;
    line-height: 25px;
    padding:6px;
    border-radius: 100%;
}
.info-timeline ul li span.timeline-circle {
  position: relative;
  border: 2px solid #38b6ff;
  border-radius: 25px;
  width: auto;
  line-height: 25px;
  text-align: center;
  margin-top: 50px;
  background-color: #38b6ff;
  z-index: 2;
    color: white;
  display: inline-block;
}

.info-timeline ul li:not(:first-of-type) span.timeline-circle::before {
  position: absolute;
  border: 1px solid #999;
  width: 0;
  height: 50px;
  display: block;
  content: '';
  left: 50%;
  z-index: 1;
  top: -54px;
  margin-left: -1px;
}

.info-timeline ul li a {
  color: #000;
}

<div class="info-timeline">
  <ul>
    <li>
            <span class="timeline-circle">
                <span class="number">
                    1
                </span>
        31/12/2016 11:28 AM (John Doe):
        </span>
            <span>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley   of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the   release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </span>
        </li>
    <li>
      <span class="timeline-circle">
        <span class="number">
          2
        </span> 31/12/2016 11:28 AM (Maria Harry Potter): 
      </span>
      <span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
      </span>
    </li>
    <li>
      <span class="timeline-circle">
        <span class="number">
          3
        </span> 31/12/2016 11:28 AM (John Faf Doe):
      </span>
      <span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type.         </span>
    </li>
    <li>
      <span class="timeline-circle">
        <span class="number">
          4
        </span> 31/12/2016 11:28 AM (John Doe):
      </span>
      <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type.
      </span>
    </li>
  </ul>
</div>

You are putting the before element half way along timeline circle, which isn’t the circle at all, it’s the white text with the blue background. — A Haworth, Commented Aug 22, 2023 at 17:19
Are you stuck with that HTML structure or can you change it? — A Haworth, Commented Aug 22, 2023 at 17:25

Roko C. Buljan · Accepted Answer · 2023-08-22 18:51:10Z

Simplify your HTML markup. Remove unnecessary tags.
Use CSS counter to customise the LI's numbered bullets
Use CSS rem units instead of px as often as you can
Use border-left on the LI to trace the line, and remove border from the last LI element
Use negative margin to unpull the bullets to overlay the border.

Here's a slight remake of your example:

/*QuickReset*/ * { margin: 0; box-sizing: border-box; }

.timeline {
  list-style: none;
  counter-reset: timeline;
  padding: 1rem;
  
  & li {
    padding: 0 0 1rem 1rem;
    border-left: 2px solid #000;
    
    &:last-child {
      border: none;
    }
  }
}

.timeline-circle {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding-right: 1rem;
  border-radius: 3rem;
  background-color: #38b6ff;
  color: #fff;
  margin-left: -1.8rem;
  
  &::before {
    counter-increment: timeline;
    content: counter(timeline);
    display: inline-flex;
    align-items: center;
    background-color: #0097b2;
    border-radius: 3rem;
    height: 1.4rem;
    padding: 0 0.5rem;
  }
}

<ul class="timeline">
  <li>
    <span class="timeline-circle">31/12/2016 11:28 AM (John Doe):</span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
    a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
    containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </li>
  <li>
    <span class="timeline-circle">31/12/2016 11:28 AM (Maria Harry Potter):</span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
  </li>
  <li>
    <span class="timeline-circle"> 31/12/2016 11:28 AM (John Faf Doe):</span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
    took a galley of type.
  </li>
  <li>
    <span class="timeline-circle">31/12/2016 11:28 AM (John Doe):</span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
    a galley of type.
  </li>
</ul>

Lucas · Accepted Answer · 2023-08-22 20:14:19Z

Try this:

<style>
    .info-timeline ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .info-timeline ul li {
        overflow-y: hidden;
    }
    .info-timeline ul li span.dateBlock {
        background-color: #38b6ff;
        color: white;
        border: 2px solid #38b6ff;
        border-radius: 25px;
        line-height: 25px;
        text-align: center;
        float: left;
        display: inline-block;
    }
    .info-timeline ul li span.circle {
        display: block;
        width: 25px;
        height: 25px;
        background-color: #0097b2;
        color: white;
        line-height: 25px;
        text-align: center;
        border-radius: 100%;
        float: left;
        position: relative;
    }
    .info-timeline ul li span.date {
        display: inline-block;
        padding: 0 5px;
    }
    .info-timeline ul li span.circle::before {
        content: '';
        display: block;
        width: 1px;
        height: 1000px;
        background-color: #999;
        position: absolute;
        left: 12px;
        top: 25px;
    }
    .info-timeline ul li:last-child span.circle::before {
        content: none;
    }
    .info-timeline ul li span.block p {
        margin-top: 0;
        line-height: 30px;
        padding-left: 32px;
        text-indent: 10px;
    }
</style>

<div class="info-timeline">
    <ul>
        <li>
            <span class="block">
                <span class="dateBlock">
                    <span class="circle">1</span>
                    <span class="date">31/12/2016 11:28 AM (John Doe):</span>
                </span>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                    unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
                    typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
                    with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </p>
            </span>
        </li>
        <li>
            <span class="block">
                <span class="dateBlock">
                    <span class="circle">2</span>
                    <span class="date">31/12/2016 11:28 AM (Maria Harry Potter):</span>
                </span>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.</p>
            </span>
        </li>
        <li>
            <span class="block">
                <span class="dateBlock">
                    <span class="circle">3</span>
                    <span class="date">31/12/2016 11:28 AM (John Faf Doe):</span>
                </span>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                    unknown printer took a galley of type.
                </p>
            </span>
        </li>
    </ul>
</div>

The result should be like this:

Collectives™ on Stack Overflow

Give numbers with vertical line to list items in responsive way (HTMl & CSS)

2 Answers 2

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Related