user3445122 user3445122 - 1 month ago 13
CSS Question

Make vertical border along with bullets using css pseudo elements

I want to make list of elements to look like this:

Bullets with vertical line running along content

Each main heading should have bullet on its left and then a horizontal line. The horizontal line should connect to vertical line and vertical line should run along the length of the content. The content will be variable.

The vertical line of preceding bullet should connect to the vertical line of the next bullet.
The last bullet's content should not have vertical line running along the content.

Here is what I have tried:

<div class="item-list">

<div class="item">
<div class="item-label">
Bullet 1
</div>
<div class="item-description">Variable length text for bullet 1</div>
</div>
<div class="item">
<div class="item-label">
Bullet 2
</div>
<div class="item-description">Variable length text for bullet 2</div>
</div>
<div class="item">
<div class="item-label">
Bullet 3
</div>
<div class="item-description">Variable length text for bullet 3</div>
</div>
</div>


Here is my CSS code:

.item-list
{
width: 100%;
}
.item-list .item
{
float: left;
line-height: 16px;
margin-bottom: 10px;
text-align: left;
display: inline-block;
padding: 0 18px;
font-size: 13px;
}
.item-list .item .item-label
{
font-weight: bold;
text-transform: uppercase;
font-size: 13px;
}
.item-list .item .item-label:before
{
content: '\26AB';
font-size: 10px;
margin-left: -17px;
padding-right: 5px;
}


And the result is:

enter image description here

Is there a way to achieve bullets with horizontal line connected to vertical border of the content and not break with content? Thank for the help.

Answer

Something like that?:

.item-list {
  position: relative;
  padding-left: 10px;
  width: 100%;
  border-left: 1px solid black;
}
.item-list .item {
  position: relative;
  line-height: 16px;
  margin-bottom: 10px;
  text-align: left;
  display: block;
  padding: 0 18px;
  font-size: 13px;
}
.item-list .item:before {
  content: "";
  position: absolute;
  top: 8px;
  left: -10px;
  width: 12px;
  height: 1px;
  background: #000;
}
.item-list .item:first-child:after {
  content: "";
  position: absolute;
  top: 0px;
  left: -12px;
  width: 5px;
  height: 8px;
  background: #fff;
}
.item-list .item:last-child:after {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 0;
  left: -12px;
  width: 5px;
  background: #fff;
}
.item-list .item .item-label {
  position: relative;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 13px;
  color: #0077cc;
}
.item-list .item .item-label:before {
  content: ''; 
  position: absolute;
 top: 2px;
  left: -16px;
  width: 13px;
  height: 13px;
  border-radius: 100%;
  background: #0077cc;
}
<div class="item-list">

  <div class="item">
    <div class="item-label">
      Bullet 1
    </div>
    <div class="item-description">Variable length text for bullet 1<br>some more texte here</div>
  </div>
  <div class="item">
    <div class="item-label">
      Bullet 2
    </div>
    <div class="item-description">Variable length text for bullet 2</div>
  </div>
  <div class="item">
    <div class="item-label">
      Bullet 3
    </div>
    <div class="item-description">Variable length text for bullet 3<br>second line</div>
  </div>
</div>

Comments