Skip to content

Instantly share code, notes, and snippets.

@diggs00
Created October 17, 2012 17:24
Show Gist options
  • Save diggs00/3906859 to your computer and use it in GitHub Desktop.
Save diggs00/3906859 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