Search code examples
cssbackground-image

CSS h2 element with underline and arrow background image

I have an H2 element that I'd like underlined and with a graphic of an arrow "below" the bottom border line.

Currently, the arrow appears above and if I change the background coordinates to lower the arrow, it starts to disappear.

my code: 

h2 {
    background: url("images/arrow-title.png") no-repeat scroll 10px 27px transparent;
    line-height: 17px;
    padding-bottom: 15px;
    text-transform: uppercase;
    border-bottom: 2px solid #00a7a8;
}

image of what it's currently doing:

enter image description here

image of what I'd like to do:

enter image description here

and finally, a website link to a theme which does this properly. I have viewed the "inspect element" on Firefox and can't seem to adjust the CSS to make it work. :(

Website link to theme that looks correct: http://www.joomlart.com/demo/#ja_travel

Solution

  • What they are doing is putting a <span /> inside the <h2 /> tag and giving the span the border-bottom instead of the <h2 />

    This way the <h2 /> has the arrow as a background image and since the <span /> adds a 3px padding on the bottom it is aligned perfectly.

    <h2>
  <span>
    This is my header
  </span>
</h2>

    and then something like this

    h2{
  background: url("../images/arrow-title.png") no-repeat left center;
}
span{
  border-bottom: 2px solid black;
  padding-bottom: 3px;
}