Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Thickness Of Underline

Post a Comment
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

Solution 1:

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><styletype="text/css">.title {

border-bottom: 2px solid red;

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

Solution 2:

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

Solution 3:

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.

Solution 4:

Change your div to a span.

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

See here:

Example

Solution 5:

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

span {
    font-size:5em;
    border: solid black;
    border-width:000.1em;
}​

Here is a fiddle: Fiddle.

Post a Comment for "Thickness Of Underline"