CSS边框底部之后的文字

CSSCSS边框底部之后的文字

.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的值将显示在边框的顶部

我的目标：

名称：__________________

我发现类似的帖子，并回答这里How to underline blank space in CSS?

但我想使用类

来源

2013-01-15 merl1nx

'.bottomdotline：after'应该帮助 – Morpheus

@Morpheus如果我将使用后，和使用内容，我该如何使用它的底边框？ tnx – merl1nx

看我的答案 – Morpheus

问题是span没有width。最简单的办法是让它有 display:inline-block 和min-width

来源

2013-01-15 11:37:45 RobAu

我试图使用最小宽度，但如果我使用100％，它仍然会影响文本。 – merl1nx

新增CSS：

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

这里是活生生的例子http://jsfiddle.net/aghd7/

来源

2013-01-15 12:11:00 Morpheus

这里是另一种解决方案。

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

来源

2017-03-09 21:27:54 Justin

CSS边框底部之后的文字

回答

相关问题