CSS border bottom after text - 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>
How can I make the bottom border after text, if I use next rows will be affected of the width. fyi: the php value will display on top of border
My goal:
Name:__________________
I found similar post and answer here How to underline blank space in CSS?
But I want to use class

Answer 1

Add css:
.bottomline:after{
content: " ";
border-bottom-style: dotted;
border-bottom-width:2px;
display:table-cell;
width:200px;
}
Here is live example http://jsfiddle.net/aghd7/

Answer 2

The problem is that the span has no width . Easiest solution is to make it have
display:inline-block
and min-width

Answer 3

Here's another solution.
<div class="container">
<h1 class="offset-border">Hello World</h1>
</div>
And the CSS.
.container{
overflow:hidden;
}
.offset-border{
display: inline-block;
padding-right: 10px;
position: relative;
}
.offset-border::after{
background: #000 none repeat scroll 0 0;
bottom: 6px;
content: "";
display: inline-block;
height: 1px;
left: 100%;
position: absolute;
width: 5000px;
z-index: -1;
}

Answer 4

Use this below code.... same as example..
ul {
display: inline-block;
}
li {
display: inline-block;
margin-right: 10px;
position: relative;
}
.underline:after {
border-bottom: 2px solid #000;
content: '';
position: absolute;
left: 0;
right: 0;
width: 50%;
bottom: 0;
margin: 0 auto;
}
<ul>
<li class="underline">Lesson Planner</li>
<li>Two</li>
<li>Three</li>
</ul>