Skip to content

Instantly share code, notes, and snippets.

@mohamedaboelmagd
Forked from diggs00/dabblet.css
Created March 30, 2022 10:42
Show Gist options
  • Save mohamedaboelmagd/979a044b2001af7110657c76f064cdc5 to your computer and use it in GitHub Desktop.
Save mohamedaboelmagd/979a044b2001af7110657c76f064cdc5 to your computer and use it in GitHub Desktop.
Vertical Line using :after
/**
* Vertical Line using :after
*/
.item {
float:left;
display:inline;
padding-right:10px;
}
.item:after {
content: "";
position: relative;
display: block;
border-top: 31px solid red;
width: 1px;
margin: -49px 0px 0px -6px;
}
.item:first-child:after {
display:none;
}
<!-- content to be placed inside <body>…</body> -->
<body>
<div class="item">
<h4>Item 1</h4>
</div>
<div class="item">
<h4>Item 2</h4>
</div>
<div class="item">
<h4>Item 2</h4>
</div>
</body>
{"view":"split-vertical","fontsize":"90","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment