CSS Auto Column separators
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<body>
<div class="container">
<h1>CSS Column Separators</h1>
<p class="text-info">Hover over any column to enlarge</p>
<div class="row">
<div class="span2 border-right">
<h2>Left</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore.</p>
<p class="show-hover">Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore. Duis aute irure dolor.</p>
<p class="show-hover">Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class="span8 border-left border-right">
<h2>Main</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
<p class="show-hover">Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Voluptatum, suscipit, dolorem, quidem,
numquam esse alias rerum quas consectetur sapiente...
CSS
.border-right, .border-left, .border-both {
position: relative;
}
.border-left:before, .border-right:after {
position: absolute;
content:'';
height: auto;
top: 50px;
bottom: 10px;
border-right: 1px solid #aaa;
width: 0;
}
.border-left:before { left: -11px; }
.border-right:after { right: -10px; }
.show-hover {
display: none;
}
div:hover>.show-hover {
display: block;
}