CODEWITHSUNDEEP
css
atomxkai
atomxkai

Reputation: 49

CSS border bottom after text

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

Upvotes: 2

Views: 26120

Answers (4)

Mohit Gupta
Mohit Gupta

Reputation: 739

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>

Upvotes: 1

Justin
Justin

Reputation: 115

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

Upvotes: 1

Morpheus
Morpheus

Reputation: 9055

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/

Upvotes: 5

Rob Audenaerde
Rob Audenaerde

Reputation: 20019

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

Upvotes: 2

Related Questions