Price Menu Ellipsis 2

[copaesthetic]

Improving upon a [previous attempt](https://css-tricks.com/forums/discussion/22977/price-menu-ellipsis#Item_8 “previous attempt”), I’m building a price menu ([example](http://i.imgur.com/YAxmlCl.png “price menu”)) 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!

[Author]

Posts