CODEWITHSUNDEEP
htmlcss
Edward K.
Edward K.

Reputation: 193

How do I make text-decoration underline extend for the maximum width of the page?

How do I make text-decoration underline extend for the maximum width of the page?

Normally it only extends as far as the word, but I would like the line to fill the whole page.

I tried using a border line instead of text-decoration, but that causes the line to go too far below the word.

    example:
    .word {
    text-decoration: underline;
    }

    <p class="word">EXAMPLE</p>

Now the underline only extends as far as the word EXAMPLE. How do I get the line to extend to the width of the entire page?

Upvotes: 1

Views: 5039

Answers (5)

Adam
Adam

Reputation: 323

adding the inline-block ensures that the underline spans the full width of the text.

.underline-text-full {
  border-bottom: 1px solid #F4F6F9;
  display: inline-block;
}

Upvotes: 0

Ahmed Alaa
Ahmed Alaa

Reputation: 124

make a border-bottom for the <p> tag and reduce the line-height till it became close enough to the word as the following:

p {
   border-bottom:1px solid #ccc;
   font-size:14px;
   line-height:12px;
   width:100%;
}

Upvotes: 1

Giuseppe
Giuseppe

Reputation: 876

use ::before pseudo element and generated content like this

.word {}
.word::before {
  content:" ";
  position: absolute;
  border-bottom:1px solid red; /*use this to adjust underlin color and size*/
  width:100%;  /*use this to adjust underline width*/
  height:1.1em; /*use this to adjust underline position*/
}
<p class="word">EXAMPLE</p>

with ::before ( https://developer.mozilla.org/en/docs/Web/CSS/::before ) you basically create a new element "on the fly" as first child in your .word p tag then you use this new element to render your underline

Upvotes: 4

G-Cyrillus
G-Cyrillus

Reputation: 105903

You can use a background-image (or gradient).

.word {
  background:linear-gradient(to bottom,transparent 1em, black 1em, black 1.1em, transparent 1.1em ,transparent 1.2em)  0 0.1em;/* color black can be reset to any other */
  background-size:auto 1.2em;/* set this according to line-height set */
}
<h1 class="word">title</h1>
<h2 class="word">title</h2>
<h3 class="word">title</h3>
<h4 class="word">title</h4>
<h5 class="word">title</h5>
<h6 class="word">title</h6>
<p class="word">EXAMPLE</p>
<p class="word">two<br/> lines</p>

Upvotes: 0

CodingWithSpike
CodingWithSpike

Reputation: 43718

You can't extend the underline like that with CSS. The closest thing would be to put the text in an element that is the full width of the page, then use a border-bottom. You can adjust how close the border is to the text with padding-bottom and/or line-height.

.word {
  border-bottom: 1px solid black;
  font-size: 16px;
  line-height: 13px;
 }
   <p class="word">EXAMPLE</p>

Upvotes: 2

Related Questions