Reputation: 435

Double underline tag?

I want to make some text double-underlined in HTML.

<h1><u><i> website </i></u></h1>

I have two lines on the bottom instead of one. Is there a certain tag for that or would I have to do it in css?

Upvotes: 28

Answers (10)

Malik

Reputation: 11

text-decoration: double underline;

Enter the code in your style tag.

It will then double underline your text.

Upvotes: 0

Aqsa Shahzadi

Reputation: 57

<h1 style="text-decoration: underline double;"><u>About Us</u></h1>

This would work, only if you want to double underline it in HTML.

Upvotes: 0

Tyler Wright

Reputation: 136

guys/gals, this works as well but is more like a traditional double underline.

.doubleUnderline {
     text-decoration-line: underline;
     text-decoration-style: double;
}

Upvotes: 8

Kim Jensen

Reputation: 329

Why not just make your own "tag"?

<style>
du
{
    text-decoration-line: underline;
    text-decoration-style: double;
}
</style>
<p> I want <du>this stuff</du> double underlined.</p>

http://jsfiddle.net/eoba541g/2/

Upvotes: 3

Fabien Snauwaert

Reputation: 5621

FYI, at the moment, the following is possible in Firefox, or in Safari using a vendor prefix:

text-decoration: underline double;
-webkit-text-decoration: underline double;

See text-decoration-line.

Upvotes: 2

roman

Reputation: 919

You can try to add this:

h1.dblUnderlined { border-bottom: 3px double; }

Note: The width must be 3px or greater because it represents the total width; not the width of each border. As you increase the measurement, the width of the lines and space may or may not be equal based on the divisibility of the defined measurement by 3. A remainder of 1, and 1 is added to the width of the space; a remainder of 2 will result in 1 being added to each line.

Upvotes: 47

user1429980

Reputation: 7138

Here's my solution (stylus):

$borderWidth 1px
$textColour black

$double-borders
    &:after
        content ""
        position absolute
        top 100%
        width 5.7em
        right 0
        border-top ($borderWidth * 3) double $textColour

.double-underlined
    @extend $double-borders

Note that the width must be hard-coded (in this case 5.7em. If this isn't the desired result, you can also use the border-bottom technique mentioned above.

Upvotes: 0

user257319

Reputation:

use the following http://jsfiddle.net/cKNP4/

or

Give the following style to any HTML container:
border-top-style:none;border-right-style:none;border-bottom-style:double;border-left-style:none;border-width: 2px solid black;

Upvotes: 0

Jukka K. Korpela

Reputation: 201518

The simplest way is to set a bottom border of type double in CSS. It needs to be at least 3 pixels wide to create the minimal double border (two 1px borders with 1px spacing between them).

The details depend on the markup, on the desired width and color of the double line, and whether it should run across the available width. Markup like <h1><u><i> website </i></u></h1> is probably not meant to be serious. With the simple markup <h1>foobar</h1>, a way to get a minimal double border across the page is to use

h1 {
  border-bottom: double 3px;
}

If you want to have just the heading text “underlined”, the simplest way is to have inner markup, like <h1><span>foobar</span></h1>, and CSS code

h1 span {
  border-bottom: double 3px;
}

Upvotes: 4

James Hill

Reputation: 61793

Use a border and and underline:

.doubleUnderline {
    text-decoration:underline;
    border-bottom: 1px solid #000;
}

<span class="doubleUnderline">Test</span>

Here's a working fiddle.

Upvotes: 24

Double underline tag?

Answers (10)

use the following http://jsfiddle.net/cKNP4/

or

Related Questions