How to overlap elements in CSS?-CodePudding

I have this stepper attached as an example in fiddle.

.stepper-wrapper {
  font-family: Arial;
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.stepper-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.stepper-item::before {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 9px;
  left: -50%;
  z-index: 2;
}

.stepper-item::after {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 9px;
  left: 50%;
  z-index: 2;
}

.stepper-item .step-counter {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ccc;
  margin-bottom: 12px;
}

.stepper-item.active {
  font-weight: bold;
}

.stepper-item.active .step-counter {
  background-color: red;
  border: 1px solid red;
  width: 15px;
  height: 15px;
  background-clip: content-box;
  padding: 3px;
  top: -2px;
  margin-bottom: 8px;
  z-index: 3;
}

.stepper-item.completed .step-counter {
  background-color: red;
}

.stepper-item.completed::after {
  position: absolute;
  content: "";
  border-bottom: 2px solid red;
  width: 100%;
  top: 9px;
  left: 50%;
  z-index: 3;
}

.stepper-item:first-child::before {
  content: none;
}

.stepper-item:last-child::after {
  content: none;
}

<div >
  <div >
    <div ></div>
    <div >First</div>
  </div>
  <div >
    <div ></div>
    <div >Second</div>
  </div>
  <div >
    <div ></div>
    <div >Third</div>
  </div>
  <div >
    <div ></div>
    <div >Forth</div>
  </div>
</div>

But I don't know how to overlap this active element so that these left and right lines go until the first (outer) circle.

This part...

How to make this in CSS?

It should be something like this.

CodePudding user response：

One solution would be to target the .stepper-item.active .step-counter class and first remove the padding. Then you can set the border color to white instead of red and use 3px instead of 1 to account for the removal of padding. Then you can add outline: solid 1px red; to get the red outline back.

.stepper-wrapper {
  font-family: Arial;
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.stepper-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.stepper-item::before {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 9px;
  left: -50%;
  z-index: 2;
}

.stepper-item::after {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 9px;
  left: 50%;
  z-index: 2;
}

.stepper-item .step-counter {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ccc;
  margin-bottom: 12px;
}

.stepper-item.active {
  font-weight: bold;
}

.stepper-item.active .step-counter {
  background-color: red;
  outline: solid 1px red;
  border: 3px solid white;
  width: 15px;
  height: 15px;
  background-clip: content-box;
  /* padding: 3px; */
  top: -2px;
  margin-bottom: 8px;
  z-index: 3;
}

.stepper-item.completed .step-counter {
  background-color: red;
}

.stepper-item.completed::after {
  position: absolute;
  content: "";
  border-bottom: 2px solid red;
  width: 100%;
  top: 9px;
  left: 50%;
  z-index: 3;
}

.stepper-item:first-child::before {
  content: none;
}

.stepper-item:last-child::after {
  content: none;
}

<div >
  <div >
    <div ></div>
    <div >First</div>
  </div>
  <div >
    <div ></div>
    <div >Second</div>
  </div>
  <div >
    <div ></div>
    <div >Third</div>
  </div>
  <div >
    <div ></div>
    <div >Forth</div>
  </div>
</div>

CodePudding user response：

Our main goal here is to cover-up the space between the actual element and its border.

The space can be filled by an inset box-shadow. It will hide all the content under it; just give the right amount of spread with zero blur :)

Just add this snippet to the element:

box-shadow: 0 0 0 3px white inset;

Here's the edited snippet

.stepper-wrapper {
  font-family: Arial;
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.stepper-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;

}

.stepper-item::before {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 9px;
  left: -50%;
  z-index: 2;
}

.stepper-item::after {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 9px;
  left: 50%;
  z-index: 2;
}

.stepper-item .step-counter {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ccc;
  margin-bottom: 12px;
}

.stepper-item.active {
  font-weight: bold;
}

.stepper-item.active .step-counter {
  background-color: red;
  border: 1px solid red;
  width: 15px;
  height: 15px;
  background-clip: content-box;
  /* Here it is */
  box-shadow: 0 0 0 3px white inset;
  padding: 3px;
  top: -2px;
  margin-bottom: 8px;
  z-index: 3;
}

.stepper-item.completed .step-counter {
  background-color: red;
}

.stepper-item.completed::after {
  position: absolute;
  content: "";
  border-bottom: 2px solid red;
  width: 100%;
  top: 9px;
  left: 50%;
  z-index: 3;
}

.stepper-item:first-child::before {
  content: none;
}

.stepper-item:last-child::after {
  content: none;
}

<div >
      <div >
        <div ></div>
        <div >First</div>
      </div>
      <div >
        <div ></div>
        <div >Second</div>
      </div>
      <div >
        <div ></div>
        <div >Third</div>
      </div>
      <div >
        <div ></div>
        <div >Forth</div>
      </div>
    </div>

CodePudding user response：

I found this one for your problem, I hope this helps you.

.stepper-item.active .step-counter::after {
  position: absolute;
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 3px solid white;
}