Css Util

css-util

# Utility CSS

```css
// Create a vertical line center
.vertical-line {
    background: linear-gradient(#000, #000) no-repeat center/2px 100%;
}
```

`background: linear-gradient(#000, #000) no-repeat center/2px 100%;`

## How this works

- `linear-gradient(#000, #000)` this creates a background-image so we can later use background-size to contain it.
- `no-repeat` this stops the gradient from repeating when we do put background-size on it.
- `center` - this is the background-position this is where we put the "diving line"
- `/2px 100%` - this is making the image 2px wide and 100% of the element you put it in.

## This is the extended version

```css
  background-image: linear-gradient(#000, #000);
  background-size: 2px 100%;
  background-repeat: no-repeat;
  background-position: center center;
```