CODEWITHSUNDEEP
css
Vikram Prasad
Vikram Prasad

Reputation: 185

Border bottom just beneath the text

I have a div block i want to apply border-bottom just beneath the text and not throughout the whole div block the div block is 

#info-header {
    font-size: 40px;
    text-align: center;
    margin:100px 10px 10px 10px;
    font-family: Poiret One;
    color:lightyellow;
    border-bottom: 1px solid whitesmoke;
}
<div id="info-header">
  find us through 
</div>

Upvotes: 1

Views: 2984

Answers (5)

Mohammad Usman
Mohammad Usman

Reputation: 39322

You can wrap your text in an inline element like <span> and apply border to it.

HTML:

<div id="info-header">
  <span>some text here...</span>
</div>

CSS:

#info-header span {
  border-bottom: 1px solid whitesmoke;
  display: inline-block;
  vertical-align: top;
}

Note: You can make your element inline-block if you wants to apply block level properties but keep it behaving like an inline element. This way you can also control the border-width and the distance between text and border line.

body {
  background: green;
  min-height: 100vh;
  margin: 0;
}
#info-header {
  font-size: 40px;
  text-align: center;
  margin:100px 10px 10px 10px;
  font-family: Poiret One;
  color:lightyellow;
}

#info-header span {
  border-bottom: 1px solid whitesmoke;
  display: inline-block;
  vertical-align: top;
}
<div id="info-header">
  <span>some text here...</span>
</div>

Upvotes: 2

user7234396
user7234396

Reputation:

Give the <div> a fixed width and give it a {margin: 0 auto} for centering

body {
  background: #131418;
  text-align: center;
}
#info-header {
  font-size: 40px;
  margin: 0 auto;
  width: 300px;
  color: lightyellow;
  border-bottom: 1px solid whitesmoke;
}
<div id="info-header">this is a nice title</div>

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105893

You can change the display value for an another block level.

html {
  background: lightgray
}
#info-header {
  font-size: 40px;
  /*text-align: center;
    margin:100px 10px 10px 10px;*/
  display: table;/* shrinks on content */
  margin: 10px auto;/* margin:auto instead text-align for this block  */
  font-family: Poiret One;
  color: lightyellow;
  border-bottom: 1px solid whitesmoke;
}
<div id="info-header">
  find us through
</div>

codepen

Upvotes: 0

Ilia Kopysov
Ilia Kopysov

Reputation: 96

You should use text-decoration property. In your case its: text-decoration: underline; You can also use text-decoration for overline and line-through read about CSS text-decoration Property

Upvotes: 0

samar
samar

Reputation: 188

Add css property text-decoration: underline

Upvotes: 0

Related Questions