Home>

I am creating a News site.
If i put an underline in a letter, the alphabet will protrude from the line.

Applicable source code
<! DOCTYPE html>
<html>
    <head>
     <meta content = "en">
     <meta charset = "utf-8">
     <style type = "text/css">
         .globalnav ul li {
             list-style: none;
             width: 150px;
             float: left;
         }
         .globalnav ul {
             margin: 0;
             padding: 0;
             display: flex;
             align-items: center;
         }
         .nav2 ul {
             margin: 0;
             padding: 0;
             display: flex;
             align-items: center;
         }
         .nav2 ul li {
             width: 120px;
             float: left;
             text-align: center;
         }
         li + li {
             border-left: 1px solid # 333;
             text-align: center;
         }
         a {
             text-decoration: none;
         }
         a: hover {
             opacity: 0.5;
         }
         .signin: hover {
             opacity: 0.5;
             cursor: pointer;
             cursor: hand;
         }
         .red {
             background-color: red;
             color: white;
         }
         .underline {
             text-decoration: underline;
             text-decoration-color: # FF0000;
             padding-bottom: 5px;
         }
    </style>
    </head>
    <body>
        <nav>
            <ul>
                <li><img src = "newslogo.png" width = "100" height = "60"></li>
                <li><img src = "signin% 20 (2) .PNG" width = "100" height = "50"></li>
                <li><a href = "#">News</a></li>
                <li><a href = "#">Sport</a></li>
                <li><a href = "#">Weather</a></li>
                <li><a href = "#">i Player</a></li>
                <li><a href = "#">TV</a></li>
                <li><a href = "#">More ▽</a></li>
            </ul>
        </nav>
        <form method = "get" action = "http://www.google.com/search" target = "_ blank">
        <input type = "search" name = "q" placeholder = "keyword input">
        <input type = "submit" name = "btng" value = "search">
        <input type = "hidden" name = "h1" value = "en">
        </form>
        <h1>NEWS</h1>
        <nav>
            <ul>
                <li>Home</li>
                <li>UK</li>
                <li>World</li>
                <li>Business</li>
                <li>Politics</li>
                <li>Tech</li>
                <li>Science</li>
                <li>Health</li>
                <li>Education</li>
                <li>Entertainment</li>
                <li>Video</li>
                <li>More ▽</li>
            </ul>
        </nav>
        <h2>Technology</h2>
    </body>
</html>


I don't know how to mess with CSS so characters don't get out of the underline. If i understand, please tell me. I tried various sites, but it didn't work.

Supplemental information (FW/tool version etc.)

Editor: Brackets
Browser: GoogleChrome
OS: Windows10

  • Answer # 1

    . underline {
      / * text-decoration: underline;* /
      text-decoration-color: # FF0000;
      padding-bottom: 5px;
      / * added * /
      display: inline-block;/* Do not fill the width * /
      border-bottom: 1px solid red;/* Border, bottom only, width 1px, normal line, red * /
    }


    How about this?