CODEWITHSUNDEEP
htmlcss
jbrulmans
jbrulmans

Reputation: 1005

How to create a vertical line with an image and text above, which goes through multiple <li>

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

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:

ul:after {
  content: '';
  width: 0;
  height: 100%;
  position: absolute;
  border: 1px solid black;
  top: 0;
  left: 60px;
}
<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.

Upvotes: 3

Views: 1792

Answers (3)

Banzay
Banzay

Reputation: 9470

.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;
}
<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>

Upvotes: 0

Osman Cea
Osman Cea

Reputation: 1467

It would be better if you use the ::before (or ::after) pseudo element on each <li> for the line so you can save the <ul> pseudo elements for the text and image, like this:

ul {
  list-style: none;
  padding: 0;
  padding-top: 40px;
  position: relative;
}
ul::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: red;
  position: absolute;
  top: 0;
}
ul::after {
  content: "Here's some text";
  position: absolute;
  top: 20px;
}

li {
  position: relative;
  padding: 0;
  padding-left: 15px;
}

li::before {
  content: "";
  display: block;
  height: 100%;
  width: 2px;
  left: 5px;
  background: red;
  position: absolute;
}
<ul>
  <li>One
  <li>Two
  <li>Three
  <li>Four
</ul>

And then replace background in ul::before with an image... I can't think of another workaround without using extra markup or javascript

Upvotes: 3

Nenad Vracar
Nenad Vracar

Reputation: 122047

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.

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;
}
<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>

Upvotes: 3

Related Questions