martin j martin j - 11 days ago 5
CSS Question

Creating borders that apply to height value

Dont know what to call it but I want a border that doesnt follow the divs

height:100%;
but is centered between top and bottom of the parent div.
What is the best solution? creating another div that contains the border? or is there any options in css that I dont know off?

heres a codepen to my current footer with the divs im using:
http://codepen.io/Volcan3/pen/yVoNZB

Answer

You could use pseudo classes to mimic a border that doesn't cover "100%"... http://codepen.io/anon/pen/yVoORm

.footer-item::after {
   content: '';
   display: block;
   height: 80px;
   width: 1px;
   background-color: red;
   position: absolute;
   right: 0;
   top: 50%;
   margin-top: -40px;
}

and then don't forget to make the parent item relative and a block:

.footer-item {
    display:block;
    height: 100%;
    position: relative;
}