I can't seem to figure out how to get the line positioned underneath the circles. Z-index isn't working and I've got the divs positioned non-static. How can I accomplish this? The idea would be that the portion of the line that overlaps the circles would be positioned behind the circles.
div.step-line { margin: 0; } div.step-col { padding: 30px 0; text-align: center; } div.step-line div.step-title:before { right: 50%; } div.step-line div.step-number { font-size: 26px; border-radius: 50%!important; display: inline-block; margin: auto; padding: 9px; border: 3px solid #e5e5e5; position: relative; z-index: 5; height: 60px; width: 60px; /*text-align: center;*/ } div.step-line div.step-title { position:relative; font-size: 20px; font-weight: 400; text-transform: uppercase; } div.step-line div.step-title:after { content: ''; height: 3px; width: 100%; position: absolute; background-color: #e5e5e5; z-index: 4; transform: translateY(-100%); top: -90%; left: 0%; } div.step-line div.step-col.first div.step-title:after { width: 50%; left: 50%; } div.step-line div.step-col.last div.step-title:after { width: 50%; right: 50%; }
<div class="row step-line"> <div class="col-md-4 step-col first"> <div class="step-number">1</div> <div class="step-title">This is a step title</div> <div class="step-content">This is a description</div> </div> <div class="col-md-4 step-col"> <div class="step-number">2</div> <div class="step-title">This is a step title</div> <div class="step-content">This is a description</div> </div> <div class="col-md-4 step-col last"> <div class="step-number">3</div> <div class="step-title">This is a step title</div> <div class="step-content">This is a description</div> </div> </div>
What i understand from your question is, you want your lines to be behind those circles, just add background color background-color: white;
in your CSS
Final code:
div.step-line div.step-number {
font-size: 26px;
border-radius: 50%!important;
display: inline-block;
margin: auto;
padding: 9px;
border: 3px solid #e5e5e5;
position: relative;
z-index: 5;
height: 60px;
width: 60px;
/*text-align: center;*/
background-color: white;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.