Я не могу продлить границу на последнем дочернем объекте

Question

Я создал организационное дерево, и я понижаю определенные поля, чтобы показать «важность» ролей работы и просто общую аккуратность. Это работает отлично, но по какой-то причине я не могу расширить границу на последнем дочернем элементе, чтобы совпасть с полем.

На моем полном дереве (а не на скрипке) У меня есть несколько ветвей, и все они отлично расширяются, за исключением последней правой меньшей ветви на каждой большой ветви.

Чтобы расширить границы я добавляю класс к каждому <li> как так:

.finance Li: после {высота: 80px; border-left: 1px solid #ccc; г-индекс: -999;}

Я просто не могу понять, почему он отлично работает на всех <li>-х для последних, кроме.

Я воспроизвел эту проблему в этой скрипке:

EXAMPLE

---

UPDATE:

Это мое полное дерево с проблемами линии: http://jsfiddle.net/HSwx4/

А вот когда я редактирую .tree li:last-child::before: http://jsfiddle.net/HSwx4/1/

Answer 1

Он наследует высоту 20px от вашего выбора .tree li::before, .tree li::after. Измените селектор .tree li:last-child::before включить высоту своего собственного:

.tree li:last-child::before { 
    border-right: 1px solid #ccc; 
    -webkit-border-radius: 0 0px 0 0; 
    -moz-border-radius: 0 0px 0 0; 
    border-radius: 0 0px 0 0; 
    height: 100%; 
} 

JSFiddle demo.

Answer 2

Наконец-то выяснилось!

Я добавил:

li .warehouse:last-child:after {top:20px;height: 290px !important; border-left: 2px solid #999 !important;} 

мне нужно добавить !important поэтому убедитесь, что оно заставило границу появляться, потому что

.tree li:first-child:before, .tree li:last-child:after{

был

border: 0 none;