Создать круг, стрелку и линию с текстом с помощью 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>

Answer 2

.btn-root {text-align:center;}
button.btn.btn-default {
    font-size: 20px;
    padding: 23px;
    width: 160px;
    border-radius: 10px;
    margin: 30px -5px 30px -5px;
    display: inline-block;
    background: #fff;
    border: 2px solid #00f911;
    cursor: pointer;
    color:#333;
}

button.btn.btn-default:hover,button.btn.btn-default:focus {
    background:  #00f911;
    outline: 0;
    color:#333;
}
.seprator {
    width: 160px;
    height: 2px;
    background-color: #00f911;
    margin: 0px auto;
    display: inline-block;
    vertical-align: middle;
    position:relative;
}
.seprator:first-child:before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #00f911;
    left: 0;
    border-radius: 100%;
    top: -9px;
}
.seprator:last-child:before {
    width: 0;
    height: 0;
    border-right: 20px solid transparent;
    content: '';
    position: absolute;
    top: -10px;
    right: 0;
    border-bottom: 10px solid #00f911;
}

<div class="btn-root">

  <div class="seprator"></div>  
  <button class="btn btn-default">
  Text
  </button>
   <div class="seprator"></div>
</div>