Justifying Text with Dots in CSS

Question: How can I align text to the right with uniform dot spacing using simple CSS, as seen in this example?

Drug 1 ............  10ml
Another drug ......  50ml
Third ............. 100ml

Answer: To achieve this justification, a technique utilizing the :after pseudo-element is commonly employed:

CSS:

dl { width: 400px }
dt { float: left; width: 300px; overflow: hidden; white-space: nowrap }
dd { float: left; width: 100px; overflow: hidden }

dt:after { content: " .................................................................................." }

HTML:

Drug 1

10ml

Another drug

50ml

Third

100ml

Limitations:

• IE versions below 8 are not supported.
• Content cannot include HTML entities, limiting the use of special characters like ·. However, UTF-8 characters can fulfill most needs.