CODEWITHSUNDEEP
csstext
Jonathan Lyon
Jonathan Lyon

Reputation: 3952

How to place a dash or underline in between letters but lower than other letters using css

I'd like to have the following written in css where the underline is positioned lower down than the other letters.

Almost like a vertical indentation

co_defy

It would be great to have the dash at the same level as the bottom of the y.

Is this possible?

Upvotes: 0

Views: 60

Answers (2)

IPSDSILVA
IPSDSILVA

Reputation: 1829

Use the text-underline-position property in CSS. Like so:

.example {

    text-decoration: underline;
    text-underline-position: under;
    -ms-text-underline-position: below;
}

As you can see, IE and Edge have a different syntax for the property. Hope this works!

Another way to do it is as such:

body {
  font-size: 50px;
}

span {
  vertical-align: middle;
}
co<span>_</span>defy

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 273077

Simply adjust vertical-align of the underscore

body {
  font-size:60px;
  font-family:arial;
}
span {
  vertical-align:middle;
}
co<span>_</span>defy

You can also use custom values to adjust like you want:

body {
  font-size: 60px;
  font-family: arial;
}

span {
  vertical-align: -0.1em;
}
co<span>_</span>defy

Upvotes: 1

Related Questions