CodePen

HTML

            
              <h1 class="title" id="target"><span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </span></h1>
            
          
!

CSS

            
              * {
  margin: 0;
  padding: 0;
}
html {
  font: 1em/1.5 Georgia, serif;
  padding: 5%;
}
body {
  width: 400px;
}
h1 {
  font-size:1.5rem;
}

/* Heading style */
.title,
.title:after{
  background-color: #333;
}
.title {
  position: relative;
  line-height: 1;
  color: #fff;
  display: inline;
  white-space: pre-wrap;
  border: 0 solid #333;
  border-width: 0.25em 0; /* 0.25em is roughly equal to one space character. */
}
.title:after {
  content: "";
  position: absolute;
  top: -0.25em;
  right: 100%;
  bottom: -0.25em;
  width: 0.25em;
}
.title > span {
  position: relative;
  z-index: 1;
  
}

.title.show {
  outline: 3px solid red;
}
.title.show::after {
  outline: 3px solid lightgreen;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var title = document.getElementById("target");

setInterval(function() {
  target.classList.add("show");
  setTimeout(function() {
    target.classList.remove("show");
  }, 1000);
}, 2000);
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................