CODEWITHSUNDEEP
htmlcss
Ebrahim Khalil
Ebrahim Khalil

Reputation: 37

h1 heading with equal border at bottom or top

I want to create a heading for widgets. The heading will have an equal or parallel bottom border. How its possible? any quick ideas. Attached is what i want to achieve. enter image description here

the second heading is the heading that I'm working on now. but i want to look it like above 1st pcture.

this is current

Hope, you understood that i am looking for paralleled border that is equal to heading and extends the width of heading."

Thank you folks! i got the answer! I'm not going to use span after h1 because it just increases the tag but "display:inline-block;" seems perfect to me.

Upvotes: 0

Views: 1802

Answers (5)

vaspant
vaspant

Reputation: 65

Try this css:

    h1{
border-bottom:3px solid black;
padding-bottom: 5px;
width:200px;
}

Upvotes: -1

Weafs.py
Weafs.py

Reputation: 22992

Wrap it in a span.

h1 span {
  text-transform: uppercase;
  padding: 20px 0;
  font-weight: 100;
  border-bottom: 1px solid black;
}
<h1><span>statistics</span></h1>

Upvotes: 2

devqon
devqon

Reputation: 13997

jsfiddle

h1{
    font-size: 25px;
    display: inline-block;
    border-bottom: 1px solid black;
    padding-bottom: 25px;
    text-transform: uppercase;
}

Upvotes: 2

Billy Moat
Billy Moat

Reputation: 21050

H1 {
    display: inline-block;
    border-bottom: 1px solid #000;
    padding: 0 0 10px;
    margin: 0;
}

Upvotes: 0

Akshay
Akshay

Reputation: 14348

try this http://jsfiddle.net/e4s8qo5q/

<h1>STATISTICS</h1>

h1{
 line-height:50px;
border-bottom:1px solid;
}

Upvotes: -1

Related Questions