Vertical rule (as opposed to <hr>) in CSS

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?

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

This post already got a awnser but I'm facing the same problem and I found something interesting:

        hr, hr.vertically {
            color: #b2b2b2;
            background-color: #b2b2b2;
        }

        hr {
            width: 100%;
            height: 0;
        }

        hr.vertically {
            width: 0;
            height: 100%;
        }

        <div style="height: 400px;">
            a
            <hr />
            <hr class="vertically" />
        </div>

Hr means horizontal rule, adding a class vertically to it sounds close to a paradox, but it look's more organized to me.

Put an <hr> element between the two, but style it to have the height/border/shadow that you want?