CodePen

HTML

            
              <body>
 
  <div class="purple-box">
    <h1>Threading</h1>
    <h1>Nails</h1>
  </div>

</body>
            
          
!

CSS

            
              body {
  background-color: blue;
}

.purple-box {
  width: 400px;
  height: 200px;
  background-color: #D0579A;
  overflow: hidden;
  margin: 40px auto;
}

.h1-sim {
  background-color: #D0579A;
  font-size: 36px;
	margin-left: 4.5%;
  color: #fff;
}

h1 {
  font-size: 36px;
	margin-left: 36px;
  padding-right: 14px;
  color: #fff;
  font-weight:normal;
  float: left;
  clear: left;
  position: relative;
}

h1:after {
  content:"";
  display: block;
  height: 20px;
  width: 400px;
  position: absolute;
  left: 100%;
  top: 13px;
  background: url(http://www.unwrappedstudio.com/threading_bar.png) no-repeat left center;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................