Price Menu Ellipsis

[copaesthetic]

I’m building a price menu and wanted to link the service with a price using ellipsis ([like this](http://i.imgur.com/YAxmlCl.png)).

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

Service………………$99

Service-Deluxe….$7

Service-Basic…….$11

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

[wolfcry911]

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

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

[wolfcry911]

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

[copaesthetic]

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: http://cdpn.io/DHcnr

[copaesthetic]

Continued on new thread, Price Menu Ellipsis 2 (https://css-tricks.com/forums/discussion/23548/price-menu-ellipsis-2#Item_1)

[Author]

Posts