CSS Title Between Lines

CSS Title Between Lines .markdown

CSS Title Between Lines ('-' * 24) Less mixin to CSS Title Between Lines decoration, minimal markup

A Pen by emilio on CodePen.

License.

index.html

<div class="deco">
  <h1 class="tit">This is my title</h1>
</div>

<div class="deco2">
  <h1 class="tit">This is my title</h1>
</div>


  

style.css

@import "lesshat";

.deco{
    font-size:5em;
   font-family: 'Arial', sans-serif;
  .title-mixin();
}
.deco2{
   font-size:100px;
   font-family: "Times New Roman", Times, serif;
  .title-mixin();
  }

//
// Title Mixin
// @fs: font size
//
.title-mixin(){  
  
   display: table;
   position: relative;
   margin:1em 0;
  
  &:before , &:after{
    border-width: 1px 0;
    border-style: solid;
    content: "";
    height: 1.2em;
    display: block;
    width: 45%;
    position: absolute;
   }
   
   &:after{
    right: 0px;
    top: 0px;
   }
   
   &:before{
    left: 0px;
   }

   .tit{
     font-size: 0.8em;
     margin: auto;
     height:100%;
     display: inline-block;
     vertical-align: middle;
     
     &:before, &:after{
       content: "*";
       font-size:0.6em;
       position: absolute;
       text-align: center;
       width: 100%;
       display:block;
       margin: 0;
       padding: 0;
     }
     
     &:before{
      top:-0.5em;
     }
     
     &:after{
      bottom: -0.9em;
     }
   }
}