CODEWITHSUNDEEP
htmlcss
NiLL
NiLL

Reputation: 13843

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

I like an obedient frotend developer must create underline with 2px padding instead of 1px by default. Is exist simple solution for this?

PS Yeahh guys, I know about div with black backgrond color and 1px * Npx and position: relative, but It's so slowly...

Upvotes: 45

Views: 167546

Answers (11)

Sam
Sam

Reputation: 361

.my-underlined-text {
    text-decoration: underline;
    text-underline-offset: 8px;
}

Upvotes: 5

Ruslan Korkin
Ruslan Korkin

Reputation: 5081

For cross-browsing it is better to use text-underline-offset over the text-underline-position, because text-underline-position isn't supported by iOS Safari

So use this answer: https://stackoverflow.com/a/63607426/1894907

#line{
    text-decoration-line: underline;
    text-underline-offset: 2px;
}

Upvotes: 72

Mirza_Umair
Mirza_Umair

Reputation: 151

Simply use:

text-decoration: underline;
text-underline-position: under;

image

Upvotes: 14

BALAJI PILLAI
BALAJI PILLAI

Reputation: 907

#line{
    text-decoration-line: underline;
    text-underline-offset: 1px;
}
<div id="line">
Text with line
</div>

just use

{
    text-decoration-line: underline;
    text-underline-offset: 2px;
}

Upvotes: 15

Humanoid
Humanoid

Reputation: 47

Try this:

.yourElement{
border-bottom: 1px solid #000;
line-height: 2;
}

Upvotes: 0

Johnny
Johnny

Reputation: 9964

You can do this with a bit of a hack using ::after elements, and positioning them manually. This does mean that you have to maintain the content attribute of the after element but you could make this easier by using a data attribute in the html tag and referring to it. See the example below - 

span:after {
    font-size: 1rem;
    position: absolute;
    content: 'Hello there..';
    width: 100%;
    height: 100%;
    white-space: pre;
    text-decoration-skip-ink: none;
    text-decoration-line: underline;
    left: 0px;
    top: 10px;
    color: white;
    z-index: -1;
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: black;
}

span {
  position: relative;
}
<span>Hello there</span>

Upvotes: 0

agm1984
agm1984

Reputation: 17132

I used @jake's solution, but it gave me trouble with the horizontal alignment.

My nav links are flex row, center aligned and his solution caused the element to shift upwards in order to stay horizontally center-aligned.

I fixed it by doing this:

a.nav_link-active {
  color: $e1-red;
  margin-top: 3.7rem;
}
a.nav_link-active:visited {
  color: $e1-red;
}
a.nav_link-active:after {
  content: '';
  margin-top: 3.3rem;      // margin and height should
  height: 0.4rem;          // add up to active link margin
  background: $e1-red;
  display: block;
}

This will maintain the horizontal alignment for you.

Upvotes: 0

jake
jake

Reputation: 820

A great way to do this without adding and extra spans and having more control is using the :after selector.

Useful especially for navigation menus:

.active a:after {
    content: '';
    height: 1px;
    background: black; 
    display:block;
}

If you want more or less space between the text and the underline, add a margin-top.

If you want a thicker underline, add more height: 

.active a:after {
    content: '';
    height: 2px;
    background: black; 
    display:block;
    margin-top: 2px;
}

Upvotes: 16

Daniel Hidalgo
Daniel Hidalgo

Reputation: 1

This is my solution...

HTML

<p>hola dasf  hola dasdsaddasds dsadasdd<span></span></p>

CSS 

p {
  color: red;
  text-decoration: none;
  position: absolute;
}
a:hover {
    color: blue;
}
p span {
    display:block;
    border-bottom:3px solid black;
    width: 50%;
    padding-bottom: 4px;
}

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34855

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/

Upvotes: 51

Alex
Alex

Reputation: 9031

how about using border-bottom:1px; padding:what-you-likepx

Upvotes: 7

Related Questions