How to Increase the Gap Between Text and Underlining in Css

How to increase the gap between text and underlining in CSS

No, but you could go with something like border-bottom: 1px solid #000 and padding-bottom: 3px.

If you want the same color of the "underline" (which in my example is a border), you just leave out the color declaration, i.e. border-bottom-width: 1px and border-bottom-style: solid.

For multiline, you can wrap you multiline texts in a span inside the element. E.g. <a href="#"><span>insert multiline texts here</span></a> then just add border-bottom and padding on the <span> - Demo

How can I increase the gap between text and its underline

Using border instead of underline would solve your problem. Try this code.

ul.ml-auto > li > a > span{
    font: 15px Roboto,sans-serif;
    font-weight: 500;
    position: relative;
    display: inline-block;
    color: #FFFFFF80;
    overflow: hidden;
      padding-bottom: 5px;
    }
    ul.ml-auto > li > a > span::before {
    position: absolute;
    content: attr(data-content);
    color: #00FFFF;
    clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
    transition: clip-path 275ms ease;
      display: block;
      border-bottom: 1px solid #00FFFF;
      padding-bottom: 3px;
    }

Adjust distance between underline and text using css

If you don't want to wrap that by some other tag then use transform to align h1 tag at center of page and change it's display to inline-block this applies to only one h1 tag,

h1 {  font-size: 24pt;  color: #279839;  position: relative;  text-decoration: none;  padding-bottom: 5px;  border-bottom: 1px solid #279839;  display: inline-block; /*Add this*/  left: 50%; /*Add this*/  transform: translate(-50%, 0); /*Add this*/}

<h1>Hello</h1>

spacing between text and underline

Not without tricks, no. One simple solution is to wrap the text in another span and give that a bottom border.

<span class="underline"><span class="title_span">title of something</span></span>

.title_span {
 font-weight: bold;
 text-decoration: underline;
 color: grey;
}

.underline {
    padding-bottom: 2px;
    border-bottom: grey 1px solid;
}

http://jsfiddle.net/m9RQ9/

Gap between text and underline

Change bottom: 0 to bottom: -3px; to get what you want:

ul {    list-style-type: none;    margin: 0;    padding: 0;   text-align: right;   line-height: 10vh;   margin-right: 10vh;   animation: fadein 5s;    -moz-animation: fadein 5s; /* Firefox */    -webkit-animation: fadein 5s; /* Safari and Chrome */    -o-animation: fadein 5s; /* Opera */    font-family: verdana;}
li {    display: inline;    margin-left: 2.5vh;   margin-right: 5vh;   text-transform: uppercase;}
a {   text-decoration:none;   color: white;}
li > a {   position: relative;   color: black;   text-decoration: none;}
li > a:hover {    color: black;}
li > a:before {    content: "";    position: absolute;    width: 100%;    height: 2px;    padding-bottom: 3px;    bottom: -3px;    left: 0;    background-color: black;    visibility: hidden;    -webkit-transform: scaleX(0);    transform: scaleX(0);    -webkit-transition: all 0.7s ease-in-out 0s;    transition: all 0.7s ease-in-out 0s;}
li > a:hover:before {    visibility: visible;    -webkit-transform: scaleX(1);    transform: scaleX(1);}

<nav id="nav">  <ul>    <li id="about"><a href="#">About</a></li>   <li id="work"><a href="#">Work</a></li>   <li id="contact"><a href="#">Contact</a></li>  </ul></nav>

space between text and underline

Either use a different font or use a border-bottom instead so that you can control the space with padding-bottom.

How make text-decoration: underline with 2px padding?

You could wrap the text in a span and give it a border-bottom with padding-bottom:2px;.

Like so

span{
    display:inline-block;
    border-bottom:1px solid black;
    padding-bottom:2px;
}

Example: http://jsfiddle.net/uSMGU/

How to increase the gap between text and underlining on my navbar links

George's way will work. Another way is as follows:

Same HTML as George except remove the <span>'s:

<nav>
    <ul class="nav navbar-default">
        <li role="presentation" class="active"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation"><a href="#">Messages</a></li>
    </ul>
</nav>

CSS:

.nav .active a{
  padding-bottom: 5px;
text-decoration: none;
border-bottom: 1px solid #337ab7;
}

.nav .active a:hover{
  border-bottom: 1px solid #23527c;
}

Here's a stripped out fiddle: http://jsfiddle.net/samuidavid/thuLwrkf/

How to Increase the Gap Between Text and Underlining in Css