CODEWITHSUNDEEP
csslineunderlineheading
chris880
chris880

Reputation: 11

Underline heading - narrower line

I want to create something like this.
enter image description here

I'm realy tired, cuz i can create only line with similar width like heading. I have to create "smaller" line then heading. Tried done it with ::before, but it doesn't work for me. Is there any possible way to create it.

<h1>Some heading here</h1>

http://jsfiddle.net/53zxor2k/

Upvotes: 1

Views: 2689

Answers (3)

Beck
Beck

Reputation: 47

h1 {
  display: inline-block;
  position: relative;
}
h1::after {
  content: '';
  position: absolute;
  left: 10%;
  display: inline-block;
  height: 1em;
  width: 70%;
  border-bottom: 1px solid;
  margin-top: 5px;
}

Change the width to how long you would like it to be, and the "left" to where the line is located, and increase the "margin-top" to make it farther away from the text.

http://jsfiddle.net/53zxor2k/1/

Upvotes: 3

SRing
SRing

Reputation: 694

<h1>some <span style="border-bottom: 2px solid red;">heading</span> here</h1>

You can simply put a border under a specific word if that is what you are attempting to do.

Upvotes: 0

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

h1 { 
    position: relative;
    text-align: center
}

h1:before{
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 130px;
    height: 2px;
    background: red;
    transform:translateX(-65px) /*    width/2    */
}
    
    
<h1>some heading here</h1>

Upvotes: 1

Related Questions