Forums

copaesthetic

Improving upon a previous attempt, I'm building a price menu (example) and wanted to link the service with a price using ellipsis.

I used text-align: right and gave it a background color that is supposed to be covering up the ellipses in the background:

http://codepen.io/copaesthetic/pen/DHcnr

dt:after {
    content: "........................................";
    height: 1px;
    position: absolute;
    left: 100%;
    z-index: 1;
}
dd {
    text-align: right;
              padding: 0 5px;
    position: relative;
    background-color: #D0579A;
    z-index: 2;
}

Despite giving the dd tag with a background color a higher z-index than the ellipsis, the ellipsis are still showing up in the background. Why?

wolfcry911

because the dd are in the same formatting context as the dt - not the absolutely positioned dt:after. So you'd need to compare dd's z-index with that of dt's.

Also, I don't believe you can have a dl as a child of dl - I'd just continue to use dt/dd with a class for the subsets.

http://codepen.io/wolfcry911/pen/honwD

copaesthetic

Thanks @wolfcry911!

treehouse : what would you like to learn today?

Forums

[Solved] Price Menu Ellipsis 2