html - 使用::before 创建围绕圆的线

Question

我正在尝试使用伪创建类似的东西:

但不确定我目前采用的方法是否是解决此问题的最佳方法？

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

你会使用伪元素创建这样的东西吗？如果是这样，我怎样才能让它看起来像图像中的那个？

Answer 1

这很简单，只需要在垂直和水平中间放置元素即可:

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