CODEWITHSUNDEEP
htmlcss
Rui Martins
Rui Martins

Reputation: 2194

Put a line above text

I'm trying to put a line over some text.

This is what I wantenter image description here

And this is what I got so far

enter image description here

this is the what I have in my application

<div class="zoekResultatLine">
    <h2 class="zoekResultat">ZOEKRESULTAAT</h2> 
</div>


.zoekResultatLine
{     
     text-decoration:overline;
     color : rgb(217, 217, 217);
}

.zoekResultat
{
    color : rgb(0, 158, 224);
}

Upvotes: 3

Views: 27576

Answers (4)

Andrei Surdu
Andrei Surdu

Reputation: 2341

HTML: 

<div class="zoekResultatLine">
     <h2 class="zoekResultat">ZOEKRESULTAAT</h2>
</div>

CSS:

.zoekResultatLine{     
    display: block;
}

.zoekResultat{
    color : rgb(0, 158, 224);
    border-top: 1px solid #888;
}

Demo: http://jsfiddle.net/Smartik/ndbyc7dp/

Upvotes: 2

Monkeybrain
Monkeybrain

Reputation: 860

As others have said, you can use a <hr/> element.

You can style these using CSS - see http://css-tricks.com/examples/hrs/

Upvotes: 0

putvande
putvande

Reputation: 15213

Give it a border-top and play with the padding-top to get it right:

.zoekResultatLine {
    border-top:1px solid rgb(217, 217, 217);
}
.zoekResultat {
    color : rgb(0, 158, 224);
    margin-top: 0px;
}

Fiddle

Upvotes: 7

Dunno
Dunno

Reputation: 3684

This is kind of a workaround but you can make a div that functions as a line:

<div class="line"></div>

div.line
{
    height: 1px;
    width: 100%;
    background-color: #000;
}

The advantage of this approach is that you can easily modify the line's width, height and colour, or even change the background to an image, add margins etc.

Upvotes: 2

Related Questions