martin j martin j - 1 year ago 82
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

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:

Answer Source

You could use pseudo classes to mimic a border that doesn't cover "100%"...

.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 {
    height: 100%;
    position: relative;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download