How to make to border-bottom line longer with CSS

Question

1. I would like to extend the border-bottom line longer than ever as the image below:

If this is impossible and you have any suggestion to make a change into my code, that would be great.

HTML:

<table id="showRoom">
<tr class="box_shadow">
    <td class="text_plant_address"> <span class="text_plant">Plant 1</span>

        <br /> <span class="text_address">Street 2, Dong An Industrial Park</span>

    </td>
</tr>

CSS:

body {
        background-color: #F6F6F6;
    }

    #showRoom {
        margin-left: 10px;
        margin-top: 10px;
        width: auto;
        border-collapse: collapse;
    }

    table .box_shadow {
        background-color: #FFF;
        font-size: 18px;
        line-height: 20px;
        text-align: center;
        font-weight: normal;
        font-family: 'Scada', sans-serif;
        display: block;
        -webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
        -moz-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
        box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
    }

    table tr .text_plant_address {
        background-color: #FFF;
        width: 175px;
        height: 175px;
        font-size: 18px;
        line-height: 20px;
        text-align: center;
        font-weight: normal;
        font-family: 'Scada', sans-serif;
        margin: 0;
        padding: 0;
    }

    table tr td span {
        height: 87.5px;
        width: auto;
    }

    table tr td .text_plant {
        border-bottom: 1px solid #D0D0D0;
    }

    table tr td .text_address {
        font-size: 10px;
    }

Here is my JSFIDDLE : http://jsfiddle.net/QTNr5/

2.Does anyone know the name of the font below?

Answer 1

Just add Padding

table tr td .text_plant {
    border-bottom: 1px solid #D0D0D0;
    padding: 0 20px; /* or how longer you want */
}

Fiddle

For the font -

1) If you have a just image file than just keep on trying random fonts the only this is solution i guess.

2) If its on some web page inspect it via firebug or any other code inspection tool.

3) If its psd or vector open it in its respective tool and try editing the font software will tell you the name like Photoshop etc.

4) Try this http://www.myfonts.com/WhatTheFont/ for getting font name from a JPG image.

I hope any of these will help you.

Answer 2

You can move the border bottom from the text_plant and make it a border top on text_address like so: http://jsfiddle.net/QTNr5/2/

table tr td .text_plant {

}
table tr td .text_address {
    font-size: 10px;
    border-top: 1px solid #D0D0D0;
    padding-top: 4px;
}

Or if you want it shorter you can add padding let and right to your text_plant like this: http://jsfiddle.net/QTNr5/4/

table tr td .text_plant {
    border-bottom: 1px solid #D0D0D0;
    padding:0 20px;
}

Answer 3

<edit> question misunderstood, answer gives a bottom border that is red, white and red again :) red on the outer parts .... </edit>

---

You can use pseudo element to draw the red part : http://codepen.io/anon/pen/axvgl/

td {
  text-align:center;
}
.text_plant {
  font-size:2em;
  border-bottom:solid white;
  box-shadow:
    0 1px 0 gray, 
    inset 0 -1px 0 lightgray;
}
.text_plant:before,
.text_plant:after {
  content:'';
  display:inline-block;
  width:1.25em;
  box-shadow:inherit;
  border-bottom:solid red;
  margin-bottom:-3px;/* size of border*/
  vertical-align:bottom;
}

---

Or use gradient http://codepen.io/anon/pen/ftmDn/

td {
  text-align:center;
}
.text_plant {
  display:inline-block;
  font-size:2em;
  padding:0 1em;
  box-shadow:
    0 1px 0 gray;

  background:linear-gradient(to left, red 20%,white 20%,white 80%,red 80%) bottom no-repeat, linear-gradient(gray,gray) no-repeat bottom;
  background-size:100% 3px, 100% 4px ;
}

Answer 4

if you want your solution in any how.. then i will recommend this..

Use 3 before plant 1 and 3 after that.. like this

<td class="text_plant_address"> <span class="text_plant">&nbsp;&nbsp;&nbsp;Plant 1&nbsp;&nbsp;&nbsp;</span>

i know its not best answer but hope it will help and you can increase according to u

Answer 5

You could change your spans to divs and remove the br. Divs will display as blocks by default, so they take up the full width of the td. I modified your fiddle to show the divs. If you don't want it to touch the edges of the box, add padding to your td.

http://jsfiddle.net/mrNXW/

<td>
  <div class="plant">Plant 1</div>
  <div class="address">Street 2, Dong An Industrial Park</div>
</td>

Answer 6

The font you're looking for I believe is this:

http://www.dafont.com/ballpark-weiner.font

Answer 7

当然，尝试在<span>添加： padding: 10px 0 。