CODEWITHSUNDEEP
css
Jerielle
Jerielle

Reputation: 7520

Adjust distance between underline and text using css

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:

enter image description here

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?

Upvotes: 0

Views: 4800

Answers (7)

Anmol Sandal
Anmol Sandal

Reputation: 1488

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;
}

Upvotes: 1

Ronen Gil
Ronen Gil

Reputation: 31

text-underline-offset

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

Upvotes: 3

soroush khani
soroush khani

Reputation: 35

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;
}

Upvotes: 0

Gerrit
Gerrit

Reputation: 1412

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 */
}

Upvotes: 1

frnt
frnt

Reputation: 8795

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>

Upvotes: 1

Adam Christopher
Adam Christopher

Reputation: 76

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;
}

Upvotes: 2

caramba
caramba

Reputation: 22480

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>

Upvotes: 2

Related Questions