Dashed-styled list linking divs

Question

I don't know exactly how to name this or how to explain it, so I'll give you some examples of what I have and what I want to create...

I have a list of divs, all of them with an own style, in a way that they look as Forums and sub-forums... Here I'll show a picture of what I have:

The code is simple:

<div id="Forums">
    <div class="category">Category</div>
    <div class="forum">Forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="forum">Forum</div>
</div>

And the css is also very easy:

.category {
    width: 95%;
    height: 3em;
    background-color: rgba(46, 183, 255, 0.67);
    margin: 2em;
    margin-bottom: 0;
}
.forum {
    width: auto;
    height: 3em;
    background-color: rgba(30, 101, 141, 0.67);
    border: dotted;
    margin-left: 4em;
}

.sub-forum {
    width: auto;
    height: 3em;
    background-color: rgba(12, 50, 69, 0.67);
    border: dotted;
    margin-left: 7em;
}

I was thinking of making a design so the categories, the forums and sub-forums are linked with a dashed-styled "list"... I don't know how to describe it, so I've made a blueprint:

Is it possible to acquire this? How can I do it?

Thanks!

Answer 1

Dynamic CSS only solution

First, this involves markup modifications for two reasons :

1. HTML Semantics

Your content is organized in herachy, category > forum > sub forum (like a menu) so to follow HTML semanitcs you need to use nested lists ul > li > ul > li ...

2. Styling

Changing the markup to nested elements will alow you to target last and first elements of each level with the :last-child and :first-child pseudo selectors and style them accordingly.

DEMO

HTML :

<ul id="Forums">
    <li class="category"><div>Category</div>
        <ul>
            <li class="forum"><div>Forum</div>
                <ul>
                    <li class="sub-forum">Sub-forum</li>
                    <li class="sub-forum">Sub-forum</li>
                    <li class="sub-forum">Sub-forum</li>
                </ul>
            </li>
            <li class="forum"><div>Forum</div></li>
        </ul>
    </li>
    <li class="category"><div>Category</div>
    </li>
    <li class="category"><div>Category</div>
        <ul>
            <li class="forum"><div>Forum</div>
                <ul>
                    <li class="sub-forum">Sub-forum</li>
                    <li class="sub-forum">Sub-forum</li>
                </ul>
            </li>
            <li class="forum"><div>Forum</div>
                <ul>
                    <li class="sub-forum">Sub-forum</li>
                    <li class="sub-forum">Sub-forum</li>
                </ul>
            </li>
             <li class="forum"><div>Forum</div>
                <ul>
                    <li class="sub-forum">Sub-forum</li>
                    <li class="sub-forum">Sub-forum</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS :

ul, li{
    list-style-type:none;
    margin:0; padding:0;
    position:relative;
}
.category > div{
    width: 95%; height: 3em;
    background-color: rgba(46, 183, 255, 0.67);
}
.forum {
    margin-left: 2em;
}
.forum > div, .sub-forum{
    height: 3em;
    border: dotted;
}
.forum > div{    
    background-color: rgba(30, 101, 141, 0.67);
}
.sub-forum {
    margin-left: 3em;
    background-color: rgba(12, 50, 69, 0.67);
}
.category li:before, .forum:after{
    content:'';
    position:absolute;
    right:100%;
    border-bottom: 0.2em dotted;
}
.category .forum:before{
    top:-1.5em; 
    height:100%; width:1em;
    border-left: 0.2em dotted;
    border-bottom-color: transparent;
}
.forum:last-child:before{
    height:3em;    
}
.forum:first-child:before{
    top:0;
    bottom:1.5em;    
}
.forum:after{
    top:1.5em;
    width:1.2em;
}
.sub-forum:before{
    bottom:50%;
    width:3.5em; height: 100%;
    border-left: 0.2em dotted;
}

Answer 2

If the to-be style list is dynamic, you will have to involve JavaScript for the simple reason that css is not a programming language, it is a styling markup and is not suitable/designed to handle dynamic html elements.

In any case, the requested styling can be achieved using the css3 pseudo elements :after and :before

what those selectors do, is pretty simple. they add another dynamic <span> before/after the selected element. for example:

.myElement:after{

}

will add a dynamic element right after the content of .myElement

the styling of the :before/:after elements is the same as any other element, with the exclusion of the content attribute that decides what to put inside the newly created element, in most cases you would want to put nothing ('') aka blank content;

in your example list, it can be styled by inserting a :before span with a styled left border, behind the list items:

.category {
    width: 95%;
    height: 3em;
    background-color: rgba(46, 183, 255, 0.67);
    margin: 2em;
    margin-bottom: 0;
}
.forum {
    width: auto;
    height: 3em;
    background-color: rgba(30, 101, 141, 0.67);
    border: dotted;
    margin-left: 4em;
}

.sub-forum {
    width: auto;
    height: 3em;
    background-color: rgba(12, 50, 69, 0.67);
    border: dotted;
    margin-left: 7em;
}
.sub-forum:before{
    position:absolute;
    content:'';
    display:block;
    width:3.6em;
    border:4px dotted black; 
    height:3em;
    margin-left:-4em;
    margin-top:-1.5em;
    border-top:none;
    border-right:none;
    z-index:-2;
}

.forum:before{
    position:absolute;
    content:'';
    display:block;
    width:1em;
    border:4px dotted black; 
    height:15em;
    margin-left:-1.6em;
    margin-top:-13.5em;
    border-top:none;
    border-right:none;
    z-index:-2;
}
.forum:nth-of-type(2):before{
    height:1.5em;
    margin-top:0em;
}

Live example: Demo

note that the position of the new elements has to be absolute, or they will push everything down.

in case of a dynamic list, you will have to utilize JavaScript to create dynamic elements using the above styling per list item.