Creating lines around a circle using ::before

Question

I'm trying to create something similar to this with the use of pseudo:

But unsure on if the approach I currently have is the best way to go about this?

.divider{
  display: flex;
  flex-direction: column;
}
.line1::before{
  content: '';
  /*position: absolute;*/
  display: block;
  width: 4em;
  height: .2em;
  background: red;
  transform: rotate(90deg);
}
.circle::before{
   content: '';
   display: inline-block;
   width: 15px;
   height: 15px;
   -moz-border-radius: 7.5px;
   -webkit-border-radius: 7.5px;
   border-radius: 7.5px;
   background-color: red;
}

<div class="divider">
  <div class="line1"></div>
  <div class="circle"></div>
  <div class="line2"></div>
</div>

Would you create something like this using pseudo-elements? If so, how can I get it to appear like the one in the image?

Why use ::before if you have access to the DOM? – StackSlave Jul 12 '19 at 07:50 — StackSlave, Jul 12 '19 at 07:50

Justinas · Accepted Answer · 2019-07-12T08:43:18.207

2

It's fairly easy, just matter of elements placement in vertical and horizontal middle:

.wrapper {
  width: 100px;
  height: 200px;
  background-color: rgba(30, 50, 80, .3);
  position: relative;
}

.wrapper div {
  border-radius: 50%;
  background-color: blue;
  position: absolute;
  top: 50%;
  margin-top: -25px;
  left: 50%;
  margin-left: -25px;
  width: 50px;
  height: 50px;
  background: center center no-repeat url(https://static.thenounproject.com/png/19279-200.png) blue;
  background-size: 30px;
}

.wrapper:before,
.wrapper:after {
  content: '';
  display: block;
  width: 2px;
  height: 60px;
  background: blue;
  position: absolute;
  left: 49px;
}

.wrapper:before {
  top: 0;
}

.wrapper:after {
  bottom: 0;
}

<div class="wrapper"><div></div></div>

edited Jul 12 '19 at 08:43

answered Jul 12 '19 at 07:47

Justinas

41,402
5
66
96

Ah, cheers. Adjusted the sizing a bit but this is neat. I'm looking to add in an image within the circle, but it's currently outside the `.circle`, how would I resolve this? You've already answered the original question, so happy to accept it and open another Q if needed. Fiddle here: https://jsfiddle.net/1edcgpvj/ – Freddy Jul 12 '19 at 08:23
@Freddy Updated answer. `.cirecle` is actually wrapper. `.circle div` is actual circle. – Justinas Jul 12 '19 at 08:43

Temani Afif · Answer 2 · 2019-07-12T08:35:29.087

You can also do this with only one element:

.box {
  width:40px;
  height:40px;
  border-top:40px solid transparent; /* The length of the top line */
  border-bottom:40px solid transparent; /* The length of the bottom line */
  padding:10px 0; /* Control distance between line and circle*/
  /* The lines */
  border-image:linear-gradient(to right,
    transparent calc(50% - 2px),
    red calc(50% - 2px) calc(50% + 2px),
    transparent calc(50% + 2px)) 1;
  /* The circle */
  background:radial-gradient(farthest-side,red 95%,transparent 100%) content-box;
}

<div class="box"></div>

Where you can easily add another image

.box {
  width:40px;
  height:40px;
  border-top:40px solid transparent; /* The length of the top line */
  border-bottom:40px solid transparent; /* The length of the bottom line */
  padding:10px 0; /* Control distance between line and circle*/
  /* The lines */
  border-image:linear-gradient(to right,
    transparent calc(50% - 2px),
    red calc(50% - 2px) calc(50% + 2px),
    transparent calc(50% + 2px)) 1;
  /* The circle */
  background:
    url(https://static.thenounproject.com/png/19279-200.png) center/30px no-repeat,
    radial-gradient(farthest-side,red 95%,transparent 100%) content-box;
}

<div class="box"></div>

Creating lines around a circle using ::before

2 Answers2