Creating a line with circle in the middle - html

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?

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>

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>

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/>

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>

Answer 5

Fiddle
This uses a lot of different codes then above.
class:before and class:after
Hope this helps you!