CODEWITHSUNDEEP
htmlcss
user1451890
user1451890

Reputation: 1095

Thickness of underline

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>

Upvotes: 3

Views: 9662

Answers (7)

Amadou Jallow
Amadou Jallow

Reputation: 1

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

Upvotes: 0

user1451890
user1451890

Reputation: 1095

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>

Upvotes: 0

user1447420
user1447420

Reputation: 1421

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

Upvotes: 3

David Thomas
David Thomas

Reputation: 253308

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.

Upvotes: 1

cem
cem

Reputation: 3321

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.

Upvotes: 0

Eric Goncalves
Eric Goncalves

Reputation: 5353

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>

Upvotes: 3

aardvarkk
aardvarkk

Reputation: 15996

Change your div to a span.

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

See here:

Example

Upvotes: 0

Related Questions