html - How to properly draw lines between li elements?

I'm building a stepper component to display steps using the ul element in a horizontal way and I have the following code:

body {
  margin: 0;
}

.page-content {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.wizard-v4-content {
  background: #fff;
  width: 80%;
  margin: 40px 20px;
  font-family: 'Roboto', sans-serif;
  position: relative;
  display: flex;
  display: -webkit-flex;
}

.wizard-v4-content .wizard-v4-form {
  width: 100%;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 20px;
}

.wizard-v4-form .wizard-v4-header {
  text-align: left;
  padding: 10px 0 5px;
}

.wizard-v4-form .wizard-v4-header .heading {
  margin: 0;
  padding: 20px 0 20px;
}

.wizard-v4-form .wizard-v4-header p {
  margin: 0;
}

.wizard-v4-container {
  width: 100%;
  z-index: -1;
}

.wizard-v4-progressbar {
  width: 90%;
  padding: 0;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wizard-v4-progressbar li {
  list-style-type: none;
  width: 10%;
  float: left;
  font-size: 12px;
  position: relative;
  text-align: center;
  color: darkgray;
}

.wizard-v4-progressbar li:after {
  width: calc(100% - 24px);
  height: 2px;
  content: "";
  position: absolute;
  background-color: darkgray;
  top: 11px;
  left: -50%;
  display: block;
  z-index: 1;
}

.wizard-v4-progressbar li:before {
  width: 24px;
  height: 24px;
  content: "";
  line-height: 30px;
  border: 2px solid darkgray;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: white;
  z-index: 2;
}

.wizard-v4-progressbar li:first-child:after {
  content: none;
}

.wizard-v4-progressbar li.wizard-v4-active {
  font-size: 90%;
  font-weight: bold;
  color: black;
}

.wizard-v4-progressbar li.wizard-v4-active:before {
  width: 28px;
  height: 28px;
  color: green;
  border-color: green;
  background-color: green;
  margin-top: -2px;
}

.wizard-v4-progressbar li.wizard-v4-checked {
  color: black;
}

.wizard-v4-progressbar li.wizard-v4-checked::before {
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  content: "\f058";
  color: green;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
}

.wizard-v4-progressbar li.wizard-v4-active+li:after {
  background-color: darkgray;
}


/* Responsive */
@media screen and (max-width: 1200px) {}

@media screen and (max-width: 992px) {}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 576px) {}

<link rel="stylesheet" href="/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<link rel="stylesheet" href=".7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="page-content">
  <div class="wizard-v4-content">
    <div class="wizard-v4-form">
      <div class="row justify-content-center">
        <div class="col-12">
          <div class="wizard-v4-container">
            <ul class="wizard-v4-progressbar">
              <li class="wizard-v4-checked">Step 1</li>
              <li class="wizard-v4-active">Step 2</li>
              <li>Step 3</li>
              <li>Step 4</li>
              <li>Step 5</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I'm building a stepper component to display steps using the ul element in a horizontal way and I have the following code:

body {
  margin: 0;
}

.page-content {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.wizard-v4-content {
  background: #fff;
  width: 80%;
  margin: 40px 20px;
  font-family: 'Roboto', sans-serif;
  position: relative;
  display: flex;
  display: -webkit-flex;
}

.wizard-v4-content .wizard-v4-form {
  width: 100%;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 20px;
}

.wizard-v4-form .wizard-v4-header {
  text-align: left;
  padding: 10px 0 5px;
}

.wizard-v4-form .wizard-v4-header .heading {
  margin: 0;
  padding: 20px 0 20px;
}

.wizard-v4-form .wizard-v4-header p {
  margin: 0;
}

.wizard-v4-container {
  width: 100%;
  z-index: -1;
}

.wizard-v4-progressbar {
  width: 90%;
  padding: 0;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wizard-v4-progressbar li {
  list-style-type: none;
  width: 10%;
  float: left;
  font-size: 12px;
  position: relative;
  text-align: center;
  color: darkgray;
}

.wizard-v4-progressbar li:after {
  width: calc(100% - 24px);
  height: 2px;
  content: "";
  position: absolute;
  background-color: darkgray;
  top: 11px;
  left: -50%;
  display: block;
  z-index: 1;
}

.wizard-v4-progressbar li:before {
  width: 24px;
  height: 24px;
  content: "";
  line-height: 30px;
  border: 2px solid darkgray;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: white;
  z-index: 2;
}

.wizard-v4-progressbar li:first-child:after {
  content: none;
}

.wizard-v4-progressbar li.wizard-v4-active {
  font-size: 90%;
  font-weight: bold;
  color: black;
}

.wizard-v4-progressbar li.wizard-v4-active:before {
  width: 28px;
  height: 28px;
  color: green;
  border-color: green;
  background-color: green;
  margin-top: -2px;
}

.wizard-v4-progressbar li.wizard-v4-checked {
  color: black;
}

.wizard-v4-progressbar li.wizard-v4-checked::before {
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  content: "\f058";
  color: green;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
}

.wizard-v4-progressbar li.wizard-v4-active+li:after {
  background-color: darkgray;
}


/* Responsive */
@media screen and (max-width: 1200px) {}

@media screen and (max-width: 992px) {}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 576px) {}

<link rel="stylesheet" href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="page-content">
  <div class="wizard-v4-content">
    <div class="wizard-v4-form">
      <div class="row justify-content-center">
        <div class="col-12">
          <div class="wizard-v4-container">
            <ul class="wizard-v4-progressbar">
              <li class="wizard-v4-checked">Step 1</li>
              <li class="wizard-v4-active">Step 2</li>
              <li>Step 3</li>
              <li>Step 4</li>
              <li>Step 5</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

However I have 2 problems:

In this sample, the lines are displayed but they do not connect to the li elements
In the actual project, the lines are not being displayed.

How can I solve this problem?

Share Improve this question edited yesterday isherwood 61.1k16 gold badges120 silver badges168 bronze badges asked 2 days ago Ivan Debono 9691 gold badge6 silver badges18 bronze badges

1 Don't you think you're trying to abuse HTML and CSS? Would you rather consider embedded SVG? You can freely use any vector graphics, style elements, fit the graphics in your page, and still handle input events. – Sergey A Kryukov Commented 2 days ago
If you remove align-items: center; from .wizard-v4-progressbar then the dashes will already align vertically. You can then work on positioning the LI-s themselves, if that would be needed. Unfortunately I lack the time to come up with a full solution. – Peter B Commented 2 days ago
"In the actual project, the lines are not being displayed." Do you have Bootstrap 4 (FYI Bootstrap is currently 5.3.3) loaded in your project? That makes a huge difference since there's no Bootstrap loaded in your example. – zer00ne Commented 2 days ago
@zer00ne Actually you're right. My actual project is BS4. So the CSS needs to somehow get fixed for BS4! – Ivan Debono Commented 2 days ago
So you can add <link href="https://cdn.jsdelivr/npm/bootstrap@#.#.#/dist/css/bootstrap.min.css" rel="stylesheet"> to the top of the HTML of this example (#.#.# = version). Or just remove the [tag: bootstrap-4] tag. Either way you should edit the post a little to avoid having to explain that to new readers. – zer00ne Commented 2 days ago

| Show 2 more comments

2 Answers 2

Sorted by: Reset to default 2

Here is a solution that uses a grid (ul), and subgrids (the li) to position everything dynamically without spaces:

body {
  height: 100dvh;
  margin: 0;
  align-content: center;
}

.wizard-v4-progressbar {
  display: grid;
  grid-template-columns: 24px;
  grid-auto-flow: column;
  grid-auto-columns: 1fr 24px;
  width: 90%;
  padding: 0;
  margin: 0 auto;
}

.wizard-v4-progressbar li {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: subgrid;
  list-style-type: none;
  font-size: 12px;
  text-align: center;
  color: darkgray;
  
  &:not(:first-child) {
    grid-column: span 2;
  }
}

.wizard-v4-progressbar li span {
  grid-row: 2;
  grid-column: 2;
  white-space: nowrap;
  width: fit-content;
  translate: -50% 0;
  margin-left: 50%;
}

.wizard-v4-progressbar li:not(:first-child):before {
  align-self: center;
  height: 2px;
  content: "";
  background-color: darkgray;
}

.wizard-v4-progressbar li:after {
  width: 24px;
  height: 24px;
  content: "";
  border: 2px solid darkgray;
  text-align: center;
  border-radius: 50%;
  background-color: white;
  z-index: 1;
}

.wizard-v4-progressbar li.wizard-v4-active {
  font-size: 90%;
  font-weight: bold;
  color: black;
}

.wizard-v4-progressbar li.wizard-v4-active:after {
  width: 28px;
  height: 28px;
  color: green;
  border-color: green;
  background-color: green;
  margin-top: -2px;
}

.wizard-v4-progressbar li.wizard-v4-active:before {
  background-color: green;
}

.wizard-v4-progressbar li.wizard-v4-checked {
  color: black;
}

.wizard-v4-progressbar li.wizard-v4-checked::after {
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  content: "\f058";
  color: green;
  font-size: 24px;
  border: none;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<ul class="wizard-v4-progressbar">
  <li class="wizard-v4-checked"><span>Step 1</span></li>
  <li class="wizard-v4-active"><span>Step 2</span></li>
  <li><span>Step 3</span></li>
  <li><span>Step 4</span></li>
  <li><span>Step 5</span></li>
</ul>

Solution according to your need (if you don't want any animation on the line). This is kind of a hack because we know the width and height of the circle. Most of the styles are same only change done is adding the lines to the <ul> element instead of <li> and using z-index and pseudo-element.

:root {
  --white: #fff;
  --dark-gray: darkgray;
}

body {
  margin: 0;
  background: var(--white);
}

.page-content {
  width: 100%;
  margin: 0 auto;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -o-justify-content: center;
  -ms-justify-content: center;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -o-align-items: center;
  -ms-align-items: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
}

.wizard-v4-content {
  background: #fff;
  width: 80%;
  margin: 40px 20px;
  font-family: "Roboto", sans-serif;
  position: relative;
  display: flex;
  display: -webkit-flex;
}

.wizard-v4-content .wizard-v4-form {
  width: 100%;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 20px;
}

.wizard-v4-form .wizard-v4-header {
  text-align: left;
  padding: 10px 0 5px;
}

.wizard-v4-form .wizard-v4-header .heading {
  margin: 0;
  padding: 20px 0 20px;
}

.wizard-v4-form .wizard-v4-header p {
  margin: 0;
}

.wizard-v4-container {
  width: 100%;
}

.wizard-v4-progressbar {
  width: 90%;
  padding: 0;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}

.wizard-v4-progressbar:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border: 2px solid var(--dark-gray);
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  margin-top: -4px;
}

.wizard-v4-progressbar li {
  list-style-type: none;
  width: 10%;
  font-size: 12px;
  position: relative;
  text-align: center;
  color: darkgray;
  z-index: 1;
}

.wizard-v4-progressbar li p {
  position: absolute;
  left: 0;
  right: 0;
}

.wizard-v4-progressbar li:before {
  width: 24px;
  height: 24px;
  content: "";
  line-height: 30px;
  border: 2px solid var(--dark-gray);
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: white;
  z-index: 2;
}

.wizard-v4-progressbar li:first-child:after {
  content: "";
  position: absolute;
  inset: 0;
  right: 50%;
  background: var(--white);
  z-index: -1;
}

.wizard-v4-progressbar li:last-child:after {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  background: var(--white);
  z-index: -1;
}

.wizard-v4-progressbar li.wizard-v4-active {
  font-size: 90%;
  font-weight: bold;
  color: black;
}

.wizard-v4-progressbar li.wizard-v4-active:before {
  width: 28px;
  height: 28px;
  color: green;
  border-color: green;
  background-color: green;
  margin-top: -2px;
}

.wizard-v4-progressbar li.wizard-v4-checked {
  color: black;
}

.wizard-v4-progressbar li.wizard-v4-checked::before {
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  content: "\f058";
  color: green;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
}

<link rel="stylesheet" href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="page-content">
  <div class="wizard-v4-content">
    <div class="wizard-v4-form">
      <div class="row justify-content-center">
        <div class="col-12">
          <div class="wizard-v4-container">
            <ul class="wizard-v4-progressbar">
              <li class="wizard-v4-checked">
                <p>Step 1</p>
              </li>
              <li class="wizard-v4-active">
                <p>Step 2</p>
              </li>
              <li>
                <p>Step 3</p>
              </li>
              <li>
                <p>Step 4</p>
              </li>
              <li>
                <p>Step 5</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - How to properly draw lines between li elements? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)