文章/答案/技术大牛

发布

社区首页 >问答首页 >在CSS中使两个圆位于垂直线的顶部

问在CSS中使两个圆位于垂直线的顶部
EN

Stack Overflow用户

提问于 2020-08-24 02:39:56

回答 1查看 306关注 0票数 5

我想在中间画橙色和蓝色的圆圈。

.content-wrap {
  border-left: 1px dashed black;
  height: 5em;
  position: absolute;
}

.content-wrap::before {
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  left: 0;
  Content: "";
  border: none;
  height: 2px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="content-wrap">
  <font-awesome-icon class="icon1" fixed-width icon="dot-circle" />
  <font-awesome-icon class="icon2" fixed-width icon="map-marker-alt" />
</div>

当前产出：

期望产出：

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-08-24 05:13:35

I没有使用befoe:：effect.see (如果这有帮助的话).

.content-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: min-content;
  margin: 0 auto;
  padding: 2rem;
  border-radius: 0.25rem;
  background: #3e3e3e;
}

.circle {
  color: pink;
  font-size: 1.25rem;
}

.dotted {
  border-left: 0.125rem dashed #f0f0f0;
  height: 8rem;
}

.marker {
  color: lightblue;
  font-size: 1.25rem;
}

<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<body>
  <div class="content-wrap">
    <i class="fas fa-dot-circle circle"></i>
    <div class="dotted"></div>
    <i class="fa fa-map-marker marker" aria-hidden="true"></i>
  </div>
</body>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63554046

复制

相似问题

问在CSS中使两个圆位于垂直线的顶部
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在CSS中使两个圆位于垂直线的顶部EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在CSS中使两个圆位于垂直线的顶部
EN