Adjust distance between underline and text using css

Question

I want to add some space between the text and the underline. But when I try to add some border on the bottom it occupies the 100% width of my resolution. So it looks like this:

Here's my css:

h1 { 
    font-size: 24pt;
    color: #279839;
    position: relative;
    text-decoration: none;
    padding-bottom: 5px;
    border-bottom: 1px solid #279839;
}

My page is multilingual so the border bottom should be the same width of the text.

Can you help me with this?

Does this answer your question? [How to increase the gap between text and underlining in CSS](https://stackoverflow.com/questions/1734618/how-to-increase-the-gap-between-text-and-underlining-in-css) — Penny Liu, Jul 11 '23 at 14:56

score 3 · Answer 1 · edited Jul 11 '23 at 14:56

3

text-underline-offset

<h1 style="text-decoration:underline; text-underline-offset:.25em;">text</h1>

edited Jul 11 '23 at 14:56

Penny Liu

15,447
5
79
98

answered Aug 20 '22 at 16:00

Ronen Gil

31
1

Consider making this a *code snippet*. – greybeard Aug 21 '22 at 14:49

score 2 · Answer 2 · answered Aug 09 '17 at 05:53

You could add display: inline-block; to the <h1> or you add a inline element (like a span) inside the h1 ...

h1 {
  text-align: center;
}

h1 span { 
    font-size: 24pt;
    color: #279839;
    padding-bottom: 5px;
    border-bottom: 1px solid #279839;
}

<h1><span>hello</span></h1>
<h1><span>hello world</span></h1>
<h1><span>hello world and univers</span></h1>

score 2 · Answer 3 · answered Aug 09 '17 at 05:54

Put a span tag inside the h1

<h1 class="the-h1"><span class="the-span">商品</span></h1>

the css

.the-h1 {
  text-align: center;
}
.the-span {
  display: inline-block;
  font-size: 24pt;
  color: #279839;
  position: relative;
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 1px solid #279839;
}

score 1 · Answer 4 · answered Aug 09 '17 at 05:57

Step1: You need to make H1 display:inline-block; so that the border remain according to the width of text instead of window width.

Step2: In Order to provide space you can use css pseudo element

h1 { 
font-size: 24pt;
color: #279839;
position: relative;
text-decoration: none;
padding-bottom: 5px;
display:inline-block;
position:relative;
margin: 0 0 10px;
}
h1:after {
content:'';
position: absolute;
left:0;
right:0;
bottom:0;
height:1px;
background: #279839;
display: block;
}

score 1 · Accepted Answer · answered Aug 09 '17 at 05:57

1

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>

answered Aug 09 '17 at 05:57

frnt

8,455
2
22
25

Thanks. I think it is much better without span because I have a lot of headers on my page. :) – Jerielle Aug 09 '17 at 06:01
@Jerielle As you added it occupies 100% width of resolution that's because your element is display as block. Welcome :-) Hopefully they all consist of a parent div around it. – frnt Aug 09 '17 at 06:02
Thanks again. I am really poor when it comes to css. :) – Jerielle Aug 09 '17 at 06:06
@Jerielle It's okay :-), must be good in other language in which I'm not :-) – frnt Aug 09 '17 at 06:34

score 1 · Answer 6 · answered Aug 09 '17 at 05:58

Your h1 tag is a block element by default, so it makes sense that the border-bottom goes through the whole width. You would need to change the display property of your headline to achieve the wished result.

h1 { 
    display: inline-block; /* most solid one; best choice */
    display: initial;      /* most safe one can easily be overwritten */
    display: inline-flex;  /* could be useful if people using flex-grids */
}

score 0 · Answer 7 · edited Aug 09 '17 at 07:24

0

h1 { 
    display:Block;
    width: 25%
    position:relative;
    margin-right:auto;
    margin-left:auto;
    font-size: 24pt;
    color: #279839;
    position: relative;
    text-decoration: none;
    padding-bottom: 5px;
    border-bottom: 1px solid #279839;
}

edited Aug 09 '17 at 07:24

Frits

7,341
10
42
60

answered Aug 09 '17 at 06:44

soroush khani

35
4

Adjust distance between underline and text using css

7 Answers7