CODEWITHSUNDEEP
htmlcssunderline
grrrbytes
grrrbytes

Reputation: 312

css: howto underline a block, but not the parts where it has text

I want to to get the following result:

________________Title of page

So let's say the html markup is <h1>Title of page</h1> and h1 is set to width:100%and text-align:right, I want it only be underlined on the left side of the title.

Any clue how to accomplish that? I have tried to wrap the title in a <div>, give that a background of white and shift it a bit down, so it overlaps the bottom of the h1-box, however, I'm not sue whether this works 100% cross-browser.

Upvotes: 0

Views: 1076

Answers (4)

MCSI
MCSI

Reputation: 2894

alternative solution:

<div style="width:100%;float:left;border-bottom:1px solid">
 <h1 style="float:right;background-color:white;padding:1px;position:relative;top:1px">Hola</h1>
</div>​

http://jsfiddle.net/VMCax/1/

Upvotes: 2

Fabien M&#233;nager
Fabien M&#233;nager

Reputation: 140205

I'd go with CSS generated content, with non-breaking spaces and underline : http://jsfiddle.net/JMVUa/1/

h1:before{
    content:"\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0";
    text-decoration: underline;
}​

Upvotes: 1

ckaufman
ckaufman

Reputation: 1497

Looks like what you are trying to do would be better achieved with a wrapper container and a float inside. Make the inner div (or floated h1) have a white background. Make the outer div have a repeated (repeat-y) background that is the same spacing as the line-height of the text div.

Make sure the wrapper div respects the floated div (either overflow:hidden or with a clear div at the end of the float.

This will give you the effect you are looking for and should work with multi-line titles as well.

Upvotes: 1

Maroshii
Maroshii

Reputation: 4017

You can try this as long as the line is not crucial to display content as it has support on IE8+.

h1:before{content:"________________"}​

jsfiddle here

Upvotes: 2

Related Questions