I want to add an icon as a connector before a div container: something like this:

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

This is what I have have (<https://jsfiddle.net/kmcursf6/>).

```css
.parent {
  border-left: 1px solid #ff0000;
}

.child {
  position: relative;
  margin-left: 20px;
  background: #e9e9e9;
  margin-bottom: 10px;
  padding: 10px;
}

.child::before {
  position: absolute;
  content: '';
  left: -20px;
  top: 50%;
  border-top: 1px solid #ff0000;
  width: 20px;
}

.child:last-child::after {
  position: absolute;
  content: '';
  left: -21px;
  top: calc(50% + 1px);
  bottom: 0;
  border-left: 1px solid #FFFFFF;
}
```

```html
<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  </div>
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  </div>
  <div class="child">
    click to add more
  </div>
</div>
```

I tried this to add that icon:

```
.child::before {
  position: absolute;
  content: '';
  left: -20px;
  top: 50%;
  width: 20px;
  transform: rotate(90deg);
  border-radius: 20px;
}

```

but it doesn't work and it completely throws off what I have. Any ideas how to get there?