The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Price Menu Ellipsis 2

  • # March 21, 2013 at 6:30 pm

    Improving upon a [previous attempt]( “previous attempt”), I’m building a price menu ([example]( “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:

    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?

    # March 21, 2013 at 9:29 pm

    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.

    # March 22, 2013 at 1:47 pm

    Thanks @wolfcry911!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed