Nesting Spans into a series of steps like a staircase

Question

I'm trying to create the following layout

Stuff » More Stuff » Children » FirstChild  
                                  » SecondChild  
                                      » ThirdChild

I have some limitations due to using a CRM system, so the html rendered is as follows:

<span>Stuff » More Stuff » Children <span class="breadcrumbItem">» FirstChild</span>
                                    <span class="breadcrumbItem" style="margin-left:10px">» SecondChild</span></span>
                                        <span class="breadcrumbItem" style="margin-left:20px">» ThirdChild</span>
                                                </span>

I've tried numerous googled css results however none create the layout i am after, the closest i have come is the following, which indeed nests the items but from the beginning of the next line rather than from the end of the last.

.breadcrumbItem {
    padding: 5px 6px 5px 2px;
    font-size: 12px;
    line-height: 6px;
    display:table;

}

is it possible to do what i am attempting?

Do you have to use spans? a `ul/li` arrangement would make more sense. — Paulie_D, May 20 '14 at 15:33

score 5 · Answer 1 · edited May 23 '17 at 12:11

You should use ul and li elements here with text-indent property

Demo

div > ul > li {
    list-style-type: none;
    display: inline-block;
    vertical-align: top;
    margin-right: 30px;
}

div > ul > li > ul {
    list-style-type: none;
}

div > ul > li > ul > li:nth-of-type(2) {
    text-indent: 20px;
}

div > ul > li > ul > li:nth-of-type(3) {
    text-indent: 40px;
}

Here, am using a nested ul and li elements, made from scratch, and for the effect you are looking for, I've used nth- type so that you don't have to modify the DOM, and nudged the text using text-indent

As far as the > goes, its important to use that, if you want the explanation, you can refer my other answer here.

With the arrows, you can use :before and :after pseudo elements like...

Demo 2

/* For arrows */

div > ul > li:after {
    content: "»";
    position: relative;
    right: -20px;
}

div > ul > li > ul > li:before {
    content: "»";
    left: -5px;
    position: relative;
}

div > ul > li:last-child:after {
    content: "";
}

Thanks, the problem which has caused me the headache is i am using a CRM system called Splendid and i am appending these "children" onto their module header. which is a TR > TD > H2 > A > SPAN - SPAN and my child are being appended to the final span. — AdamWhite, May 20 '14 at 15:46
@AdamWhite if you have JS control you can append the elements around those spans — Mr. Alien, May 20 '14 at 15:48

score 0 · Accepted Answer · answered May 20 '14 at 16:27

I've managed to get this done entirely thanks to Mr. Alien.

http://jsfiddle.net/4zzQ8/

   <span>Module » Parent » Wraper
<span class="breadCrumbitem">

        <ul>
            <li>First Item</li>
            <li>Second Item</li>
            <li>Third Item</li>
   </ul>

span.breadCrumbitem  {
list-style-type: none;
display: inline-block;
vertical-align: top;
margin-right: 30px;
position: relative;
top: -13px;
}    
span.breadCrumbitem > ul   {
list-style-type: none;
text-indent: -30px;
}

span.breadCrumbitem > ul > li:before   {
content: " » ";
}

Nesting Spans into a series of steps like a staircase

2 Answers2