CSS点缀元素效果

Question

我已经设置了一个列表，其中每个列表元素包含两个容器：title和description容器。我需要的是在每条线的底部显示点。

它在Chrome和Safari中运行良好。但不幸的是它在firefox中不起作用。

jsfiddle

有关如何使其在firefox中也有效的建议吗？

ul.basic {
  display: table;
  overflow: hidden;
}

ul.basic li {
  position: relative;
  display: table-row;
}

ul.basic li .title, ul.basic li .description {
  display: table-cell;
  background-color: #fff;
}

ul.basic li .title {
  color: #999;
  position: relative;
  overflow: hidden;
  padding-right: 60px;
}

ul.basic li .title span {
  position: relative;
  z-index: 10;
  background-color: #fff;
}

ul.basic li .title:after {
  content: '....................................................................... .......................................................................................................................................... ....................................................................................................................................... .............................................................................................................................................................................................';
  position: absolute;
  width: 300%;
  margin-left: -100%;
  word-wrap: break-word;
}

ul.basic li .description {
  padding-left: 2px;
  color: #000;
}

Answer 1

我看到FF和CHrome之间的两种行为确实不同。 Aniway为什么不使用

border-bottom: 1px dotted;

作为css .description的css规则？ （如果需要，也适用于.title）

Answer 2

我必须使用图像在所有浏览器中正确显示所需的结果。