css - Custom underlines -

does know how possible create custom underlines text goes onto 2 lines?

at present have following:

<h1 class="title" id="page-title">title goes here</h1>  h1 { display: inline-block; zoom: 1; line-height: 1.4em; background-image: url(../img/underline.png); background-repeat: repeat-x; background-position: left bottom; } 

problem when line becomes longer , wraps, 1 underline.

see jsfiddle

looking solution works ie8

the trick used in code uses background images repeats in x direction , placed @ bottom of element. consequently, block-like rendering (including inline block) of element, “underline” appears @ bottom of block only.

to make trick work, in sense, multi-line content, need make element inline element:

h1 { display: inline; } 

you need create line breaks , vertical spacing using methods wrapping h1 element in div container , setting vertical margins on it.