bottom border width for text

Question

I have some text which I want underlined. Now, I don't just want the actual text to underline, I want the line to stretch across the screen.

I do:

H4{align:left; font-style: bold; border-bottom: 1px black solid;}

However, I don't want the line to run the entire width of the screen. I only want it to be say 750px wide or a percentage of the screen. I try:

H4{align:left; font-style: bold; border-bottom: 1px black solid; width:750px;}

But this does not work. The line still runs the entire width of the page. Any tips?

The sample you have specified should work as you expect. What is the result? — BenM, Jan 07 '13 at 17:10
please post a jsfiddle showing it not working, so we can see your html structure too — Kayo, Jan 07 '13 at 17:10
The second CSS code is working http://jsfiddle.net/enve/Pu2QJ — Idrizi.A, Jan 07 '13 at 17:19
I have asked for this to be deleted because I made a mess of question — dublintech, Jan 07 '13 at 17:25

score 0 · Answer 1 · edited Jan 07 '13 at 17:14

0

use a <hr />

then in the css:

hr{
    width: 75%;
    border: solid #DDD;
    border-width: 1px 0 0;
    clear: both;
    margin: 10px 0 30px;
    height: 0;
    margin-left: auto;
    margin-right: auto;
}

edited Jan 07 '13 at 17:14

Idrizi.A

9,819
11
47
88

answered Jan 07 '13 at 17:10

joshuahornby10

4,222
8
36
52

score 0 · Answer 2 · answered Jan 07 '13 at 17:12

0

I suspect that you have some other CSS that is overriding your definition. For example, your CSS does function as expected: http://jsfiddle.net/pvjvA/1/

h4 {
  text-align:left; 
  font-style: bold; 
  border-bottom: 1px black solid; 
  width:750px;
}

answered Jan 07 '13 at 17:12

BenM

52,573
26
113
168

Just curious -- do you actually do this in practice? (Set a width on a header tag?) It feels odd to me. Maybe only because I don't usually do it. – Scott Simpson Jan 07 '13 at 17:13
1

Yes, if the template requires it. – BenM Jan 07 '13 at 17:17

bottom border width for text

2 Answers2