Добрый день!
Подскажите, как можно сделать пунктир к дочернему элементу?
Как тут /
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуВот вариант на чистом CSS (jsfiddle). Картинки там не нужны.
span { /* обертка пункта */
text-decoration: none;
display: block; /* растянем до правого края блока */
margin: 0 0 0 1.2em;
background-color: transparent;
border: dotted silver; /* цвет линий */
border-width: 0 0 1px 1px; /* границы: низ и лево */
}
span a {/* текст элемента дерева */
display: block;
position: relative;
top: .95em; /* смещаем узел на середину линии */
background-color: #fff; /* закраска в цвет фона обязательна иначе будет видно линию */
margin: 0 0 .2em .7em; /* делаем промежуток между узлами, отодвигаем левее */
padding: 0 0.3em; /* небольшой отступ от линии */
}
Идея в том, что мы делаем границы, а сам текст смещаем вверх, таким образом получаем эффект линии ведущей к узлу.
Картинкой. Смотрите здесь. Для соответствующих <li>
устанавливается свой класс, и в css для класса указывается background
. firebug в руки и смотреть что и как...