Question

I know it doesn’t exist, but is there a pure CSS version?

Would like to set height, and make it 1px wide (with shadow, if possible).

Just cannot fathom a pure CSS way of doing this. Would need to be absolutely positioned.

As my container has two divs side by side, 60-40% split for example. Need the vertical rule between the two, but don’t really want to use border-left on div 2.

Any suggestions?

Answer 1

for this you basically need to setup a place to put it and a div statement works.

 <div style="width:150px;height:2px;background-color:#000000;">&nbsp;</div>

this could also be referenced:

 .hr {width:150px;height:2px;background-color:#000000;} // in your css file/script

 <div class="hr">&nbsp;</div> <!-- IN HTML -->

You can change the position and have it going up/down or left/right with css placement and z-index

 .hr {width:2px;height:150px;background-color:#000000;position:absolute;top:0px;left:50px;z-index:10;} // in your css file/script

---

basically

 width            = how wide you want it
 height           = how tall you want it
 background-color = is the color you want it to be
 position         = absolute, relative, float - basically if it stays in one place or moves with page content
 top              = where to place in reference to top of page - could be margin-top
 left             = where to place in reference to left of page - could be margin-left