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

  • # February 27, 2013 at 6:47 pm

    I’m building a price menu and wanted to link the service with a price using ellipsis ([like this](

    I am using an unordered list with a text-align: right




    Is there a jQuery plug-in for something like this? Or should I just manually add periods within the HTML? Thanks!

    # February 27, 2013 at 7:05 pm

    This reply has been reported for inappropriate content.

    Just a little bit hacky: :)

    Using JavaScript or php or manually add the dots would be much better, but would work best with a monospace font.

    # February 27, 2013 at 8:55 pm

    Here’s a similar method using a dl and a pseudo element (in the past I’ve used background images – still may).

    # February 28, 2013 at 3:19 am

    This reply has been reported for inappropriate content.

    I like yours better, because it uses the actual dots from the font used.

    # February 28, 2013 at 12:59 pm

    Thanks. For the record, I wasn’t implying that my way was better – I just like showing alternatives.

    # February 28, 2013 at 2:15 pm

    This reply has been reported for inappropriate content.

    Of course, I’d do the same :)

    # March 11, 2013 at 11:37 pm

    Thanks @wolfcry911, I like your method.

    Before using it, I tried manually entering periods, but that still left text ragged and unaligned, plus its not very elegant. Good call with using dl instead of ul tags. I’ve taken out the width properties and replaced it with overflow: hidden for my liquid layout:

    # March 19, 2013 at 9:12 pm

    Continued on new thread, Price Menu Ellipsis 2 (

Viewing 8 posts - 1 through 8 (of 8 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