I wanna build a connected li elements with a Vertical Line(Y-axis), straight line which goes from top to bottom connected,The design I made works well, However, I want to to add some space vertical between lis I used margin but it separates the Vertical line. How can I do space but keep the vertical line connected.
ul{
list-style:none;
}
li{
border-left: .4rem solid #BBB;
padding-left: 1.5rem;
font-size: 1.2rem;
margin: 1.5rem 0;/*Here does space but they're not connected*/
position:relative;
}
li::before{
content:"";
display:block;
width:1.3rem; height:.4rem;
background-color: #BBB;
position:absolute;
top:1rem;
left:0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linked Unordered List</title>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</body>
</html>from Recent Questions - Stack Overflow https://ift.tt/3DfoCLV
https://ift.tt/eA8V8J
No comments:
Post a Comment