.container
  h1.liner Good for titles

  h2.liner ...And subtitles

  p.liner Even for a long a$$ blocks of text

  p.liner
    button Works with any element
  
  div.nest
    h3.liner Nested
    | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus, nulla non aliquet consequat, lectus sem viverra lacus, vitae consectetur nulla ante at enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce a elementum tortor, facilisis hendrerit nisl. Vestibulum sed venenatis risus. Donec pretium fringilla nisi, vitae finibus nulla vulputate at. Donec eleifend sem ipsum, quis bibendum neque condimentum non. Nam varius vehicula ligula id suscipit. Duis nec sem quis diam posuere mollis. In hac habitasse platea dictumst. Phasellus vitae euismod mi. Nulla in sollicitudin diam.
View Compiled
.liner {
  display: flex;
  align-items: flex-start;
  text-align: left;

  &:after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background: #D66853;
    min-width: 20px;
    margin: auto;
  }

  &:after {
    margin-left: 20px;
  }
}


body {
  padding: 50px;
  background-color: #11151C;
  color: #7D4E57;
  line-height: 170%;
  font-family: sans-serif;
  .container {
    width: 80%;
    margin: 0 auto;
    
    .nest {
      width: 50%;
      margin: 40px auto;
      border: solid 1px;
      padding: 20px;
    }
  }
}

h1, h2, h3 {
  color: #D66853;
}
button {
  border-radius: 5px;
  height: 35px;
  border: 0;
  padding: 0 10px;
  background-color: #D66853;
  color: #7D11151C4E57;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.