0

I am designing a very basic webpage, with basic HTML and CSS. So, I have designated a subpage for my "blog":jx-s-potato.glitch.me

On the page,by writing the following code:

<body>
  <h1 id="title1"><u>The Blog</u></h1>
</body>

I expected "The Blog" to show up with an underline.However, only "The Blo" got underlined. I thought that this was a problem with my browser so I used Safari to view it.The problem remained.

Is there something wrong about my code? Please help!

Rainbow
  • 6,772
  • 3
  • 11
  • 28
SoInstant
  • 49
  • 9
  • 1
    I guess that is due to the `descenders`. That means the lower part of `g` is below the `baseline`. Since some `updates` underlines are breaked at `descenders`. To remain legibility. – deEr. May 26 '18 at 10:52
  • Check this : https://stackoverflow.com/a/31445364/7148391 – Rainbow May 26 '18 at 10:55
  • Hi, thanks for responding so quickly! I tried all the solutions suggested by that page which you suggested @ZohirSalak CeNa, but the problem still remained. – SoInstant May 26 '18 at 11:04
  • I guess the link by @ZohirSalakCeNa was more to picture the problem. There is no programming solution. Look at Google headlines to see how it works! – deEr. May 26 '18 at 11:06

1 Answers1

1

A workaround would be to use some styling and mimic the underline.

I used Pseudo-element after here, but you can do whatever you like. 

u{
    position:relative;
    text-decoration:none;
}
u:after{
    content: '';
    width: 100%;
    height:2px;
    background-color: black;
    position:absolute;
    left:0;
    bottom:4px;
}
<h1 id="title1"><u>The Blog</u></h1>
Rainbow
  • 6,772
  • 3
  • 11
  • 28