Adding a box on top of a divider-CodePudding

I've made a divider for my site and it works perfectly! I'm just having trouble with adding a little box on top of my divider as shown in the picture, any help would be appreciated!

.divider {
    width: 2px;
    background: linear-gradient(90deg, rgba(6,144,45,1) 0%, rgba(6,144,45,0.0032387955182072714) 87%);
    height: auto;
    min-height: 5vh;
    margin-right: 25px;
}

<div ></div>

The box on the divider should look like this

CodePudding user response：

You can achieve this by using the pseudo-element ::before.

.divider::before {
  content: '';
  display: block;
  position: relative;
  background-color: black;
  width: 8px;
  height: 8px;
  top: 0;
  left: -2px;
}

.divider {
  background-color: black;
  width: 4px;
  height: 60px;
}

<div ></div>