점으로 찍힌 CSS 효과

Question

각 목록 요소에 두 개의 컨테이너 (title 및 description 컨테이너 포함)가있는 목록을 설정했습니다. 내가 원하는 것은 각 줄의 맨 아래에 점들을 표시하는 것입니다.

Chrome 및 Safari에서 정상적으로 작동합니다. 하지만 불행히도 파이어 폭스에서는 작동하지 않습니다.

jsfiddle

이것은 또한 파이어 폭스에서 작동하도록하는 방법에 대한 어떤 제안?

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

모든 브라우저에서 원하는 결과를 제대로 표시하려면 이미지를 사용해야했습니다. 이 도움이 수도 (!) 참고로

Answer 2

나는 FF와 크롬 사이에서 실제로 2 가지 행동을 보았다. 아니 웨이 그냥 왜 사용하지 마십시오

border-bottom: 1px dotted; 

css .description에 대한 CSS 규칙으로? (필요한 경우 .title)