How to Make Vertical Lines Between List Items Using CSS

How to make vertical lines between list items using CSS?

This will work with dynamic content and no extra DOM has been used. Give a try

ul {  list-style: none;}
ul li { padding-bottom: 40px; position:relative}
ul li span { border-radius: 50%; border: 1px dashed black; padding: 5px 10px; margin-right: 10px; background:#fff}ul li span:before{ content:''; position:absolute; border-left:1px solid ; left:14px; bottom:0; z-index:-1; height:100%}
ul li:last-child span:before{ content:none;}ul li:last-child{ padding-bottom:0}
<ul><li><span>1</span>Легко устанавливается на сайт</li><li><span>2</span>Следит за поведением посетителей</li><li><span>3</span>Замечает, когда они тянут курсор к крестику, намереваясь уйти</li><li><span>4</span>И показывает всплывающее окно с заманчивым предложением</li>  </ul>

Making a vertical line in HTML/CSS under a list

I'm totally guessing at your html structure as you haven't provided it, but if it is something like a list (as it seems to be a nav) then you could use the after element to create the bottom line:

ul {  list-style: none;  padding: 0;  margin: 0;  border-bottom: 1px solid grey;}ul li {  display: inline-block;  padding: 5px 5px 10px 5px;  position: relative;  font-weight: bold;}ul li:after {  content: '';  display: block;  position: absolute;  bottom: 0;  left: 50%;  height: 8px;  border-left: 1px solid grey;}
<ul>  <li>Overview</li>  <li>Sales</li>  <li>Settings</li></ul>

How to create vertical lines between items in menu with :after selector

You can do this like below code:

.meny li:first-child a:after{
display: none;
}

.meny {    list-style-type: none;    margin: 0;    padding: 0;    overflow: hidden;    background-color: black;}
.meny li { float: left;}
.meny li a { display: block; color: white; text-align: center; padding: 17px 20px 15px 20px; position: relative; text-decoration: none; font-size: 12pt; text-transform: uppercase;}
/* Below is the code for the vertical lines */
.meny li a:after { content:""; background: white; position: absolute; bottom: 0; left: 0; height: 100%; width: 1.5px;}.meny li:first-child a:after { display: none;}
<div class="meny">    <li><a href="#">Item</a></li>    <li><a href="#">Item</a></li>    <li><a href="#">Item</a></li>    <li><a href="#">Item</a></li></div>

How to add a vertical line beside list items with css

The parent element (li) needs to be position:relative and the ::after element needs to be positioned absolutely. Note that I removed the height on the after element - ince at least one of the li's had more than one line within it - and instead applied the top, right, and bottom values to be the same as your padding on the li.

.sidebar {  background-color: #09204f;  color: white;  width: 200px;  position: absolute;  top: 0;  left: 0;  bottom: 0;}.sidebar img {  padding: 0px 20px;}
body { margin: 25px;}
ul { margin: 0; padding: 0; list-style: none;}
.nav-item { font-size: 24px; padding: 15px 10px; border: 1px dashed white; margin: 5px 5px; position: relative}.nav-item .kpi-name { font-size: 14px;}.nav-item .kpi-value { font-size: 14px; font-weight: 700;}.nav-item.green-item:after { background-color: #15a859; border-color: #15a859;}.nav-item.amber-item:after { background-color: #f8ae0a; border-color: #f8ae0a;}.nav-item.red-item:after { background-color: #e73e46; border-color: #e73e46;}.nav-item:after { content: ""; display: inline-block; width: 7px; position: absolute; top: 15px; right: 10px; bottom: 15px; border: 1px solid #000; border-radius: 7px;}
.page { background-color: #f3f8ff; position: absolute; top: 0; left: 200px; right: 0; bottom: 0;}
<div class="main-wrap">

<div class="sidebar">
<div class="menu"> <ul> <li class="nav-item green-item"> Menu Item


</li> <li class="nav-item amber-item">Menu 2 <div> <span class="kpi-name"> Active User </span> <span class="kpi-value"> 2400 </span> </div>
</li> <li class="nav-item green-item ">Menu 3</li> </ul> </div> </div> <div class="page"> <h1>PAGE CONTENTS HERE</h1> </div></div>

Horizontal list item with line between

Here is an example of a line running between each of the lis.

enter image description here

  • Add position: relative to the ul so it becomes parent to :after element
  • Position :after in the vertical middle of the characters using vertical translation
  • Provide z-index and background-color to lis so they stay "on top of" of the gray line

ul {    display: flex;    align-items: stretch; /* Default */    justify-content: space-between;    width: 100%;    margin: 0;    padding: 0;    position: relative;}
li { display: block; flex: 0 1 auto; /* Default */ list-style-type: none; background-color: white; padding: 0 0.75em; z-index: 1;}
li:first-child { padding-left: 0;}
li:last-child { padding-right: 0;}
ul:after { content: ''; border-bottom: 1px solid lightgray; position: absolute; transform: translateY(-50%); top: 50%; width: 100%;}
<ul>  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li></ul>

How to make a vertical line in HTML

Put a <div> around the markup where you want the line to appear to next, and use CSS to style it:

.verticalLine {  border-left: thick solid #ff0000;}
<div class="verticalLine">  some other content</div>

vertical lines in HTML CSS

Use CSS and border.

Remove the right border from the :last-child

.row {
display: flex;
justify-content: center;
}

.links a {
padding: 0 1.2rem;
border-right: 2px solid #888;
}

.links a:last-child {
border-right: 0;
}
<div class="row links">
<a href="#">Some link 1</a>
<a href="#">Some link 2</a>
<a href="#">Link 3</a>
<a href="#">Some link 4</a>
</div>

CSS - Vertical line between bullets in an unordered list

I doubt that this is achievable using just borders and "fiddling with margins" as others have suggested, at least I've had no luck in doing so.

This solution uses CSS-generated content (:before and :after) to draw bullets and lines. It allows for
a high degree of customization and it keeps the markup clean, but note the browser support.

JSFiddle (scroll through CSS until the /* BORDERS AND BULLETS */ comment)

ul.experiences li {
position:relative; /* so that pseudoelements are positioned relatively to their "li"s*/
/* use padding-bottom instead of margin-bottom.*/
margin-bottom: 0; /* This overrides previously specified margin-bottom */
padding-bottom: 2.5em;
}

ul.experiences li:after {
/* bullets */
content: url('http://upload.wikimedia.org/wikipedia/commons/thumb/3/30/RedDisc.svg/20px-RedDisc.svg.png');
position: absolute;
left: -26px; /*adjust manually*/
top: 0px;
}

ul.experiences li:before {
/* lines */
content:"";
position: absolute;
left: -16px; /* adjust manually */
border-left: 1px solid black;
height: 100%;
width: 1px;
}

ul.experiences li:first-child:before {
/* first li's line */
top: 6px; /* moves the line down so that it disappears under the bullet. Adjust manually */
}

ul.experiences li:last-child:before {
/* last li's line */
height: 6px; /* shorten the line so it goes only up to the bullet. Is equal to first-child:before's top */
}

NOTE: if the line's border-color has an alpha-channel specified, the overlap between first and second elements' borders will be noticeable.



Related Topics



Leave a reply



Submit