HTML FORMS /
CSS
/
Header with Top Border
<!DOCTYPE html> <html> <head> <style> .section-heading { border-top: 2px solid #e4eaef; margin-bottom: 10px; padding: 10px 0 10px; position: relative; } .section-heading h2 .heading:before { display: inline-block; position: absolute; top: -10px; left: 0; content: ""; background-color: orange; height: 2px; width: 100%; } element.style { } .section-heading h2 .heading, .section-heading h3 .heading { position: relative; } .section-heading h2, .section-heading h3 { font-size: 20px; line-height: 1; margin: 0; text-transform: uppercase; color: blue; } </style> </head> <body style="padding:50px"> <div class="section-heading"> <h2><span class="heading" style="font-family:century gothic;">About us</span></h2> </div> </body> </html>