css - 使用 CSS 创建带文本的圆、箭头和线条

Question

我想使用伪类但不知道如何实现这种效果

Answer 1

你可以只用一个元素和一些背景来做到这一点:

.box {
  padding:20px;
  margin:0 60px;
  border-radius:20px;
  border:2px solid green;
  display:inline-block;
  position:relative;
}
.box::before {
  content:"";
  position:absolute;
  z-index:-1;
  left:-50px;
  right:-50px;
  height:20px;
  top:calc(50% - 10px);
  background:
    /*arrow*/
    linear-gradient(to bottom right,green 49%,transparent 52%) bottom right/15px 50%,
    linear-gradient(to top right,green 49%,transparent 52%) top right/15px 50%,
    /*circle*/
    radial-gradient(green 56%,transparent 60%) -2px 50%/20px 20px, 
    /*line*/
    linear-gradient(green,green) right center/50px 2px,
    linear-gradient(green,green) left center /50px 2px;
  background-repeat:no-repeat;
}

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