How do you draw a line from a border? - css

Question

I currently have this HTML:
#circle {
background-color: orange;
max-width: 40px;
margin-right: 20px;
margin-bottom: 20px;
min-width: 40px;
min-height: 40px;
font-size: 12px;
border-radius: 50%;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 40px;
float:left;
}
#innerContent {
border: solid 2px black;
padding: 3px;
}
#pointerDiv{
float:left;
}
<div id="circle"><span id='innerContent'>123</span></div><div id='pointerDiv'>text goes here</div>
I'm trying to achieve this effect:
Basically, a line that goes from the border to point to an element I can fill with text that explains the number. How do I do this?

Answer 1

The below is one sample method to achieve this by using a pseudo-element and then positioning it absolutely as required.
The reason for the left: -58px is because the margin-right (I had modified it from the 20px in question to 50px in answer just for illustration) is 50px + the border of the box is a few px inside the circle and so that also had to be considered. The width of the line is made smaller than the left value so as to make the line end just before the pointerDiv.
Note that I have also added a clear: both to the #circle just in-case you want to add more such entries one below the other. If not required, it can be removed.
#circle {
background-color: orange;
max-width: 40px;
margin-right: 50px;
margin-bottom: 20px;
min-width: 40px;
min-height: 40px;
font-size: 12px;
border-radius: 50%;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 40px;
float: left;
clear: both;
}
#innerContent {
border: solid 2px black;
padding: 3px;
}
#pointerDiv {
float: left;
position: relative;
height: 40px;
line-height: 40px;
}
#pointerDiv:before {
content: '';
position: absolute;
border: 1px solid black;
top: 50%;
left: -58px;
width: 55px;
}
<div id="circle"><span id='innerContent'>123</span>
</div>
<div id='pointerDiv'>text goes here</div>
<div id="circle"><span id='innerContent'>123</span>
</div>
<div id='pointerDiv'>some lengthy text goes here</div>
<div id="circle"><span id='innerContent'>123</span>
</div>
<div id='pointerDiv'>short txt</div>

Answer 2

You can either use a CSS border or a SVG to draw a line (may not be compatible with some browser)
#circle {
background-color: orange;
max-width: 40px;
margin-bottom: 20px;
min-width: 40px;
min-height: 40px;
font-size: 12px;
border-radius: 50%;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 40px;
float: left;
}
#innerContent {
border: solid 2px black;
padding: 3px;
}
#pointerDiv {
float: left;
line-height: 40px;
}
#line-svg {
float: left;
margin-top: 20px;
margin-left: -6px;
width: 100px;
}
<div id="circle"><span id='innerContent'>123</span>
</div>
<svg id="line-svg">
<line x1="0" y1="0" x2="100%" y2="0" style="stroke:rgb(0,0,0);stroke-width:4" />
</svg>
<div id='pointerDiv'>text goes here</div>

Answer 3

You could always use pseudo elements? I've created a basic mockup below:
.circle {
height: 55px;
width: 55px;
border-radius: 50%;
background: orange;
position: relative;
display: inline-block;
}
.circle:before {
position: absolute;
content: "hi";
height: 60%;
top: 20%;
left: 20%;
width: 60%;
border: 2px solid black;
}
.circle:after {
position: absolute;
content: "";
width: 100%;
right: -85%;
top: 50%;
border-bottom: 1px solid black;
}
.tooltip {
display: inline-block;
margin-left: 55px;
height: 60px;
width:60px;
}
.wrapper{
display:block;
}
<div class="wrapper">
<div class="circle"></div>
<div class="tooltip">text goes here</div>
</div>