HTML CSS examples for CSS Widget:Header
Line on side header with different color
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> h1 {<!-- ww w .ja va 2s. c om--> position: relative; overflow: hidden; white-space: nowrap; text-align: center; text-overflow: ellipsis; font: 1.6em/1.1 Georgia; padding: .2em 0; } h1:before, h1:after { content: ""; position: relative; display: inline-block; width: 50%; height: 2px; vertical-align: middle; background: #000; } h1:before { left: -.5em; margin: 0 0 0 -50%; background: #ef387a; } h1:after { left: .5em; margin: 0 -50% 0 0; background: #1c77bd; } h1>span { display: inline-block; vertical-align: middle; white-space: normal; } html { background: #f06; background: linear-gradient(45deg, #f39, yellow); min-height:100%; font: 1.3em/1.5 Georgia; } </style> </head> <body> <h1>Hello!</h1> <p>test </p> <p>test </p> <h1> <span> test test <br> test test</span> </h1> <h1>test test test test</h1> <p>test test tes tstsetaf </p> <footer> <a href="">footer</a> </footer> </body> </html>