Thickness of underline

Question

I am attempting to control the thickness of an underline, however, it seems its just one huge horizontal line that does not conform to the text. How can I get the text to underline as the same thickness of the text:

<!DOCTYPE>
<html>
<head>
<style type="text/css">
.title {

border-bottom: 2px solid red;

}
</style>
</head>
<body>
<div class="title">test</div>
</body>
</html>

??? you want an underline that is a thick as the text size? So when you have for example a font-size of 14 pixel you want the underline also 14 pixel? — Sven Bieder, Nov 28 '12 at 19:29
are you talking about the horizontal width or thickness of the line? — cem, Nov 28 '12 at 19:39
@user1451890 ok, just want to make sure, because most of the answers tell you how to limit the width ;) — cem, Nov 28 '12 at 19:41

score 3 · Answer 1 · answered Nov 28 '12 at 19:29

The 'border-bottom' style is being added to the 'div' tag. Because by defult 'divs' are set to 'display: block;' the width of the div is 100%. To solve this, add another tag surrounding the text and give the class to that tag.

For Example: <div><span class="title">test</span></div>

New Code:

<!DOCTYPE>
<html>
<head>
<style type="text/css">
.title {

border-bottom: 2px solid red;

}
</style>
</head>
<body>
<div><span class="title">test</span></div>
</body>
</html>

score 3 · Answer 2 · answered Nov 28 '12 at 19:35

3

you just have to insert display:inline-block; in your css or float the element;

answered Nov 28 '12 at 19:35

user1447420

1,382
2
12
14

David Thomas · Answer 3 · 2012-11-28T19:34:53.490

The problem you have is that you're using a border, not an underline. The border extends the full length of the element, which for a div is width: 100% by default.

To change that you should limit the width of the div explicitly, or by using float or changing its display.

Using width:

div {
    width: 10em; /* or whatever... */
}

JS Fiddle demo.

Using float:

div {
    float: left; /* or 'right' */
}

JS Fiddle demo.

Using display:

div {
    display: inline-block; /* or 'inline' */
}

JS Fiddle demo.

Of course, given that you effectively want the underline to be below the text and, presumably, serve to 'underline' the text (see the problem with the demo, using a defined width if the text is longer than the defined width), it'd be easier to simply use an in-line element, such as a span for this, rather than a div, since its default behaviour is the same behaviour that you want.

score 0 · Answer 4 · answered Nov 28 '12 at 19:28

0

Change your div to a span.

span is good for short pieces of text on a single line.

See here:

Example

answered Nov 28 '12 at 19:28

aardvarkk

14,955
7
67
96

The underline disappears then. (IE 7) – user1451890 Nov 28 '12 at 19:32
Ahh -- sorry. Works in Chrome! – aardvarkk Nov 28 '12 at 19:33

score 0 · Answer 5 · answered Nov 28 '12 at 19:32

0

If you use em instead of px, the border adopts the font size.

span {
    font-size:5em;
    border: solid black;
    border-width:0 0 0.1em;
}

Here is a fiddle: Fiddle.

answered Nov 28 '12 at 19:32

cem

3,311
1
18
23

I am guessing that theres not an IE7 friendly method? – user1451890 Nov 28 '12 at 19:39
Well, this should work in IE7. I will check that, just booting my windows can … ;) – cem Nov 28 '12 at 19:42
Checked. Works fine in IE7. Do you experience any problems? – cem Nov 28 '12 at 19:45

user1451890 · Answer 6 · 2012-11-28T20:10:01.793

0

Seems like for IE7 there is only method to make this work:

<!DOCTYPE html>
<html>

<head>

<style type="text/css">
h1 {
border-bottom: 3px solid red;
display: inline;
}
</style>

</head>

<body>
<div><h1>Hello, world</h1></div>

</body>

</html>

edited Nov 28 '12 at 20:10

answered Nov 28 '12 at 19:59

user1451890

1,055
2
13
19

score 0 · Answer 7 · answered Mar 01 '19 at 03:06

0

try adding: margin: auto. This should scale the line according the length of the text

answered Mar 01 '19 at 03:06

Amadou Jallow

1
1

Thickness of underline

7 Answers7

Linked