“T’es pas cap !” (première édition)

by oilvier

HTML

<!--<h1>“T’es pas cap !” (première édition)</h1>-->


<h1 class="site-name">Titre</h1>

CSS

body {display:table; width:100%; font-family:Arial; font-size:24px; font-weight:bold;}
/* h1 {text-align:center; display:table-row; position:relative; width:100%; white-space:nowrap; line-height:1px; vertical-align:middle;}

h1:before, h1:after { display:table-cell;
    content: "";
    width:50%;
    line-height:1px;
    vertical-align:middle;
    border-top:1px solid #000;
} */

.site-name {position:relative; z-index:2; text-align:center; font-size:20px; overflow:hidden;}
            .site-name:before { content: " "; position: absolute; z-index:1; background: #00A8C6; width:100%; height:1px; left:-49%; top:50%; }
            .site-name:after { content: " "; position: absolute; z-index:1; background: #00A8C6; width:100%; height:1px; right:-49%; top:50%; }