Menu style “…” - fill in with periods

Question

I have been trying to find the best way to create the \".....\" effect like in a dinner menu: http://cl.ly/0g263j04322m3F140D40

Not sure if it has to be done with ju

Answer 1

There's a solution using an image as the ellipses. You could probably do it with JavaScript, but this is the only CSS way I can think of. Demo here.

What you need to do is give a container element a repeating background of dots, and then any element on top of it has an opaque background; this will hide the dots, giving a half decent effect. Experimentation is key.

Code as follows:

HTML

    Big plate o' food1 million money

CSS

div
{
    background: url('http://media.avclub.com/images/auth/user/57461/ellipsis_png_35x42_crop_q85.jpg') repeat-x;
}

strong, span
{
    background: white;
}

span
{
    float: right;
}

Please note I've used a really crappy image for the ellipses; you can do better.