I want to display something like this image :

[![enter image description here](https://i.stack.imgur.com/8isYS.png)](https://i.stack.imgur.com/8isYS.png)

I am struggling with the :before and :after, I can't manage to display a perfectly aligned line with the dots.

```css
.line {
  height: 3px;
  width: 50px;
  background: green;
}

.line::before {
  content: "\A";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: green;
}

.line::after {
  content: "\A";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: green;
}
```

```html
<div class="line"></div>
```

;
margin-bottom: 8px;

```
      &:before, &:after {
        @extend .dot;
      }
    }

  .dot {
    content: "\A";
    display: inline-flex;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }

```