CODEWITHSUNDEEP
htmlcss
Rolando
Rolando

Reputation: 62624

How to make a line border with circles in html?

How to make the following where each div has a "circle" connected to lines on the left side of multiple divs?

An example of this is here: https://www.ruxit.com/ruxit/survey.html

How to replicate this effect/border?

Upvotes: 1

Views: 680

Answers (2)

Senju
Senju

Reputation: 1035

If you inspect the element in question on the website you provided you can see that the circle is done using a :before pseudo element and the line is done using the :after pseudo element.

Here is a quick mock up on jsfiddle

CSS:

.border:before
{
    background-color:blue;
    width:1.2em;
    height:1.2em;
    content:'';
    display:block;
    float:left;
    border-radius:50%;
}
.border:after
{
    content:'';
    display:block;
    background-color:blue;
    height:100%;
    width: 1px;
    left:0.55em;
    margin-top:-1px;
    position:relative;
}

And here is an improved version by King Kong using border-left, which solves the problem of :after not appearing when using long strings:

HTML:

<div class="border" style="height:75px;">hey</div>
<div class="border" style="height:50px;">hey2</div>
<div class="border" style="height:150px;">hey3</div>
<div class="border end">done</div>

CSS:

.border {
    padding-left:20px;
    position:relative;
    margin-left:0.6em;
    box-sizing:border-box;
}
.border:not(.end) {    
    border-left:1px solid blue;        
}
.border:before
{
    background-color:blue;
    width:1.2em;
    height:1.2em;
    content:'';    
    border-radius:50%;
    position:absolute;
    left:-0.6em;
    top:0;
}

Upvotes: 1

Kisspa
Kisspa

Reputation: 584

html

 <div class="line">
   <div class="col3"><span class="circle"></span></div>
   <div class="col3"><span class="circle"></span></div>
   <div class="col3"><span class="circle"></span></div>
   <div class="col3"><span class="circle"></span></div>
 </div>

css

.line .col3{
   float: left;
   position: relative;
   top: -8px;
   width: 288px;
}

see jfiddle

http://jsfiddle.net/kisspa/n5m7x/

Upvotes: 0

Related Questions