Question: I'm having some trouble trying to create a vertical line through multiple `<li>`'s, while having some text and an image above it. What I would like to achieve is something like the image below.

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

I already found how I can create the vertical line. I found this can be achieved by use the `:after` tag in css on the `<ul>` above. Like for example:

```css
ul:after {
  content: '';
  width: 0;
  height: 100%;
  position: absolute;
  border: 1px solid black;
  top: 0;
  left: 60px;
}
```

```html
<ul>
  <li>Test 1</li>
  <li>Test 2</li>
  <li>Test 3</li>
  <li>Test 4</li>
  <li>Test 5</li>
</ul>
```

Now I also would like to add some text and an image above this line, like in the example image. Does anyone have an idea how to best achieve this? Or another solution? Thanks in advance.

Answer: 
You could use first `li` for image and text and position it with `position: absolute` so it is aligned with the line. Also you need to add `padding-top` on `ul` and subtract same amount from height of the red line.

```css
ul {
  position: relative;
  list-style: none;
  padding-top: 80px;
}
li:first-child {
  position: absolute;
  left: 150px;
  top: 0;
  transform: translateX(-50%);
  text-align: center;
}
li:not(:first-child) {
  border: 1px solid black;
  margin: 10px;
}
ul:after {
  content: '';
  position: absolute;
  left: 150px;
  top: 80px;
  background: red;
  height: calc(100% - 80px);
  width: 2px;
}
```

```html
<ul>
  <li>
    <img src="http://placehold.it/50x50">
    <div>Lorem ipsum dolor.</div>
  </li>
  <li>Test 1</li>
  <li>Test 2</li>
  <li>Test 3</li>
  <li>Test 4</li>
  <li>Test 5</li>
</ul>
```
```css
.wrap {
  position: relative;
  width: 30%;
  background: lightgreen;
  z-index: 1;
}
.header {
  width: 100%;
}
.header img {
  width: 100%;
  margin: 0;
  float: left;
}
.header p {
  background: tomato;
  text-align: center;
}
.header p:after {
  content: ' ';
  width: 4px;
  height: 100%;
  position: absolute;
  background: tomato;
  top: 0;
  left: 60px;
  z-index: -1;
}
```

```html
<div class="wrap">
<div class="header">
  <img src="http://lorempixel.com/output/sports-q-c-150-80-3.jpg"><p>some text</p>
</div>
<ul>
  <li>Test 1</li>
  <li>Test 2</li>
  <li>Test 3</li>
  <li>Test 4</li>
  <li>Test 2</li>
  <li>Test 3</li>
  <li>Test 4</li>
  <li>Test 2</li>
  <li>Test 3</li>
  <li>Test 4</li>
  <li>Test 2</li>
  <li>Test 3</li>
  <li>Test 4</li>
  <li>Test 5</li>
</ul>
</div>
```