Control Underline Position on Text-Decoration: Underline

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 move text decoration underline property so that It's not break text

You can change this behavior to force the underline/overline to go through the character by setting text-decoration-skip-ink to none.

a:hover {
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

Take control over text-decoration: underline without using border property

You can simply use the CSS3 text-decoration-color property, it works with Chrome too.

Demo:

a {  text-decoration: underline;  -webkit-text-decoration-color: green;  text-decoration-color: green;}

<a href="#">This is just a link</a>

How to change the length/position of text-decoration:underline?

Use gradient and you can easily adjust size and position:

.underline {
  background-image: linear-gradient(#5fca66 0 0);
  background-position: bottom center; /*Adjust the background-position to move the line*/
  background-size: 80% 2px; /*Adjust the background size to control length and height*/
  background-repeat: no-repeat;
  padding-bottom: 4px; /* this can also control the position */
}

.small {
  background-size: 50% 1px;
}

.left {
  background-position: bottom left;
}

.center-close {
  background-position: bottom 5px center;
  background-image: linear-gradient(red 0 0);
}

.right {
  background-position: bottom right;
}

.close {
  padding-bottom: 0;
  background-position: bottom 5px center;
  background-image: linear-gradient(blue 0 0);
}

.big {
  background-size: 100% 3px;
}

.far {
  padding-bottom: 10px;
  background-image: linear-gradient(purple 0 0);
}

body {
  font-size: 30px;
}

This is a <span class="underline">sentence</span>. I would like <span class="underline close">some words to have</span> longer <span class="underline left">underlines</span> than others. I would <span class="underline big center-close">also like</span> to be able to change the <span class="underline small right">position</span> of the <span class="underline big">underline</span>(to
<span class="underline far">be centered under the word, for example</span>).

Is it possible to underline text with some height between text and underline line?

Here's a simple hacky way to do it:

Text(
            "Forgot Password?",
            style: TextStyle(
              shadows: [
                Shadow(
                    color: Colors.red,
                    offset: Offset(0, -5))
              ],
              color: Colors.transparent,
              decoration:
              TextDecoration.underline,
              decorationColor: Colors.blue,
              decorationThickness: 4,
              decorationStyle:
              TextDecorationStyle.dashed,
            ),
          )

I wrote an article about text underlining with a few other solutions but this is my favorite.

text decoration underline for dom element doesn't underline for all letters in a word

The reason this isn't working is because the letters p, y, g, j, etc all have what are called descenders. They will interrupt the flow of the underline and there isn't really anything to do about it. If you really want to have it under all of the text, I would suggest scrapping the text-decoration and using this:

a {
  display: inline-block;
  border-bottom: 1px solid #000;
}

This give the effect of the underline while still going under all of the letters.

Is it possible to change to the underline height from when the developer uses `text-decoration: underline;` in CSS to create an underline?

unfortunately, you cannot control text-decoration height and spacing between text. So I have used border-bottom. Hopefully, this will help you.

#title4 {    font-size: 2.5rem;    font-weight: 700;    margin-top: 5rem;    border-bottom: 5px solid #000;    display: inline-block;    padding-bottom: 10px;    font-family: sans-serif;}

<h1 class="text-center" id="title4">About</h1>

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/

---

Related Topics