Creating a line with circle in the middle

Question

So, I'm trying to achieve this result:

This is what I got when I tried: https://jsfiddle.net/wvdkmjge/

.container {
  width: 100px;
  height: 1px;
  background-color: black;
}
.circle {
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  background-color: transparent;
  border: solid 1px black;
  border-radius: 50%;
}

<div class="container">
  <div class="circle">

  </div>
</div>

Moreover, I want that I'll not see the border line on the circle. Any suggestions?

Motherinlaw

Nice one OP. You say I want that no border line on the circle, and add border: solid 1px black; – Schofield

Answer 1

A small amendment to your code to position the elements and you get the effect you want to achieve.

.container {
  width: 100px;
  height: 1px;
  background-color: black;
  position: relative;
}
.circle {
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  background-color: white;
  border: solid 1px black;
  border-radius: 50%;
  position: absolute;
  top: -6px;
  left: calc(50% - 5px);
}
.blue {
  margin-top: 20px;
  background: #3EB2EF;
}
.blue .circle {
  background: #3EB2EF;
  border-color: #3EB2EF;
}

<div class="container">
  <div class="circle">

  </div>
</div>

<div class="container blue">
  <div class="circle">

  </div>
</div>

Refusal

Exactly what I wanted. Thanks! – Motherinlaw

Sure, I cant do it now, just more 4 minutes – Motherinlaw

thanks for this elegant solution. How have you found " top: -6px;" please? – Shiva

Answer 2

If you want to position an element depending on its parent, use position:relative for the parent and then add position relative or absolute to the child. to center something in the middle, use margin:0 auto and if it has absolute positioning also add left:0; right:0;

https://jsfiddle.net/azizn/e4ev3awj/1/

.container {
    width: 100px;
    height: 1px;
    background-color: blue;
    position:relative;
}
.circle {
    display:inline-block;
    width: 10px;
    height: 10px;
    position: absolute;
    background:blue;
    left:0;
    right:0;
    margin:0 auto;
    border-radius: 100%;
    top:-4px;
}

<div class="container">
<div class="circle">

</div>
</div>

Mewl

Answer 3

a bit late to answer, but this looks like a typical <hr/> that needs some makup.

/* restyle however your needs are hr and its pseudo elements , here only one is used */
hr {
  color: turquoise;
  border-width: 3px;
  margin: 1em;
  box-shadow: 0 0 5px gray;
}
hr:before {
  content: '';
  border-radius: 100%;
  position: absolute;
  height: 20px;
  width: 20px;
  background: turquoise;
  left: 50%;
  margin: -10px;
  box-shadow: inherit
}

<hr/>

Catchfly

Thats a better option. Why unnecessarily increase no of elements. <hr> seems semantically correct too here. – Schofield

Answer 4

Try this:

.container {
  width: 100px;
  height: 1px;
  background-color: black;
  position: relative;
}
.circle {
  position: absolute;
  top: -5px;
  left: 50%;
  margin-left: -5px;
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  background-color: transparent;
  border: solid 1px black;
  border-radius: 50%;
}

<div class="container">
  <div class="circle">

  </div>
</div>

Trahan

Answer 5

Fiddle

This uses a lot of different codes then above.

class:before and class:after

Hope this helps you!

Warfore

Answer 6

Using flex, for the style I used SASS & Tailwind.

<div class="flex my-20 w-84 justify-between circle">
 <p>1</p>
 <div><hr /></div>
 <p>2</p>
 <div><hr /></div>
 <p>3</p>
 <div><hr /></div>
 <p>4</p>
</div>



.circle > p
      @apply bg-backDrop text-lg w-10 h-10 rounded-full text-white flex justify-center items-center
.circle > div
    @apply flex items-center
.circle > div > hr
     @apply w-14 items-center

No need to use negative positions

Comstockery