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>

如果我使用下一行将受到宽度的影响，如何在文本之后制作底部边框。仅供参考：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

Answer 3

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>

Answer 4

这是另一个解决方案。

<div class="container">
  <h1 class="offset-border">Hello World</h1>
</div>

和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;
}