css - テキストの後の CSS 境界線の下

Question

CSS

.bottomdotline{
border-bottom-style: dotted;
border-bottom-width:2px;
display:table-cell;
width:100%;
}

html

<td >Name: <span class="bottomline"> <? echo $name; ?></span></td>
<td ></td>

次の行を使用すると、テキストの後に下の境界線を作成するにはどうすればよいですか?幅の影響を受けます。fyi: php 値は境界線の上に表示されます

私の目標：

名前：__________________

ここで同様の投稿と回答を見つけました CSSの空白スペースに下線を引くには?

しかし、私はクラスを使いたい

Answer 1

CSS を追加します。

.bottomline:after{
  content: " ";
  border-bottom-style: dotted;
  border-bottom-width:2px;
  display:table-cell;
  width:200px;
}

ここにライブの例がありますhttp://jsfiddle.net/aghd7/

Answer 2

問題は、にspanがないことwidthです。最も簡単な解決策は display:inline-block 、min-width