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 li
s.
- Add
position: relative
to theul
so it becomes parent to:after
element - Position
:after
in the vertical middle of the characters using vertical translation - Provide
z-index
andbackground-color
toli
s 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
A Div With Auto Resize When Changing Window Width\Height
Vertically Align Text Next to an Image
Is There a ≪Meta≫ Tag to Turn Off Caching in All Browsers
Transform3D' Not Working With Position: Fixed Children
Vertically Centering a Div Inside Another Div
How to Remove Margin Space Around Body or Clear Default CSS Styles
How to Remove Free Spaces Between Divs
Can't Scroll to Top of Flex Item That Is Overflowing Container
How to Disable Equal Height Columns in Flexbox
What's the Difference Between an Id and a Class
Angular:Failed to Load Images: 404 (Not Found)
Understanding CSS Selector Priority/Specificity
How to Set the Height of an Outer Div to Always Be Equal to a Particular Inner Div
How to Write A:Hover in Inline Css
What Is the Default Form Http Method
Why Position:Sticky Is Not Working When the Element Is Wrapped Inside Another One
Make First Column Fixed and Next Column Scrollable in HTML Table