"text"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/jonneal/pen/PzGYEE?depth=everything&limit=all&order=popularity&page=3&q=text&show_forks=false" /> <style class="cp-pen-styles">[data-underline] { box-shadow: inset 0 -0.12em 0 0 #f5f5f5, inset 0 -.14em 0 0 rgba(245, 245, 245, 0.5), inset 0 -.14em 0 0 currentColor; text-decoration: none; text-shadow: .05em 0 #f5f5f5, -0.05em 0 #f5f5f5, 1.5px 0 #f5f5f5, -1.5px 0 #f5f5f5; } body { background-color: #f5f5f5; margin: 0 auto; max-width: 544px; max-width: 34rem; padding: 0 1em; } h1, h2, h3, h4, h5, h6 { line-height: 1; margin: 16px 0; margin: 1rem 0; } h1 { font-size: 4em; } h2 { font-size: 3em; } h3 { font-size: 2em; } h4 { font-size: 1.5em; } h5 { font-size: 1.25em; } h6 { font-size: 1em; } p { line-height: 1.5; } a { color: black; } a:hover, a:focus { color: blue; } a:active { color: red; } ::-moz-selection { background-color: #b3d4fc; color: #000000; text-shadow: none; } ::selection { background-color: #b3d4fc; color: #000000; text-shadow: none; }</style></head><body> <p><strong>Decorative Text Underline</strong> uses a combination of box-shadow and text-shadow to form a <em>modest</em> underline that preserves the element color and weaves between text descenders.</p> <h1><a href="#" data-underline>Alpha gauge joy poppy quip.</a></h1> <h2><a href="#" data-underline>Alpha gauge joy poppy quip.</a></h2> <h3><a href="#" data-underline>Alpha gauge joy poppy quip.</a></h3> <h4><a href="#" data-underline>Alpha gauge joy poppy quip.</a></h4> <h5><a href="#" data-underline>Alpha gauge joy poppy quip.</a></h5> <h6><a href="#" data-underline>Alpha gauge joy poppy quip.</a></h6> <br><br><br><p><strong>Plain Text Underline</strong> is rather painful to look at in comparison.</p> <h1><a href="#">Alpha gauge joy poppy quip.</a></h1> <h2><a href="#">Alpha gauge joy poppy quip.</a></h2> <h3><a href="#">Alpha gauge joy poppy quip.</a></h3> <h4><a href="#">Alpha gauge joy poppy quip.</a></h4> <h5><a href="#">Alpha gauge joy poppy quip.</a></h5> <h6><a href="#">Alpha gauge joy poppy quip.</a></h6> </body></html>

Questions / Comments: