css - How to align about the colon in each line of text like movie credits often do

Question

I would like to align a few line of text about the colon in each line. So I have this:

aaa:111
bbbbbbb:22222
cccccccccc:33333333
dd:44
eeee:5555

I want them to align about the colon:

       aaa:111
   bbbbbbb:22222
cccccccccc:33333333
        dd:44
      eeee:5555

So far I can manage it with a table and two columns, the left column text-align:right, and the right column text-align left. But I am so sure that there are much more elegant solutions than this. -- Any ideas?

Thanks!

Answer 1

An easy and semantic way would be to use a definition list:

Demo

* {
  margin: 0;
  padding: 0;
}

dt {
  display: block;
  float: left;
  width: 100px;
  text-align: right;
}

dt:after {
  content: ':';
}

dd {
  display: block;
}

<dl>
  <dt>aaa</dt>
  <dd>111</dd>
  <dt>bbbbbbb</dt>
  <dd>22222</dd>
  <dt>cccccccccc</dt>
  <dd>33333333</dd>
  <dt>dd</dt>
  <dd>44</dd>
  <dt>eeee</dt>
  <dd>5555555</dd>

</dl>