<div class="input-text">
   
   <p class="message">Chiang Mai, Thailand&nbsp;<span></span>
   </p>
   
</div>
* {
  -webkit-box-sizing: border-box; /* Android ≤ 2.3, iOS ≤ 4 */
     -moz-box-sizing: border-box; /* Firefox 1+ */
          box-sizing: border-box; /* Chrome, IE 8+, Opera, Safari 5.1 */
}

body, html {
    font-family: 'Menlo', monospace; 
    background-color: #eee;
}

h1, h2, h3, h4, h5, h6, p, ul, ol {
    margin: 0;
    margin-bottom: 1.5rem;
}


.input-text {
    background: #fff;
    overflow: hidden;
    width: 440px;
    margin: 0 auto;
    margin-top: 10rem;
    padding: .75rem 1rem;
    border-radius: 2px;
    border: 1px solid #ccc;
    box-shadow: inset 0 2px 2px rgba(0,0,0,.1);
}


/* Animation stuff */


.message {
    position: relative;
    float: left;
    margin: 0;
    font-size: 2rem;
    letter-spacing: 0px;
}

.message span {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    background: #fff;
    border-left: 4px solid #167ff0;

    -webkit-animation-name: typing, blinking;
    -webkit-animation-duration: 5s, 1s;
    -webkit-animation-iteration-count: 1, infinite;
    -webkit-animation-timing-function: steps(21,end), steps(1,end);


}

@-webkit-keyframes typing {
  0%   { width: 100%; }
  100% { width: 0; }
}

@-webkit-keyframes blinking {
  0%   { border-color: transparent; }
  50% { border-color: #167ff0; }
  100% { border-color: transparent; }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.