JSFiddle - React, Tailwind, and code Playground

HTML

<h1 class="ie8plus">abc</h1>

<h1 class="border">abc</h1>

<h1 class="cc">abc<!--[if lte IE 7]> <span>I'm IE7-, let me die please</span><![endif]--><!--[if gt IE 8]><!--> not IE7- here<!--<![endif]--></h1>

<h1 class="textindent"><span>abc</span></h1>

<h1>.after<span class="after"> </span></h1>

CSS

body {
    margin: 10px;
}

h1 {
    float: left;
    clear: left;
    margin-bottom: 5px;
    background: red;
    color: white;
    text-indent: 15px;
}

.ie8plus:after {
    content: '';
    margin-left: 15px;
}

.border {
    border-right: 20px solid blue; /* you want red obviously. 'transparent' won't work in IE7- so you must have a solid background under h1 */
}
.textindent {
    text-indent: 35px; /* already 15px and we add 20px */
}
.textindent span {
    position: relative;
    left: -20px;
}
.cc span { /* HTML conditional content only interpreted by IE7-. Messy on so many levels... Let's keep the use of conditional comments to conditional stylesheets and conditional classes! */
    background-color: yellow;
    color: black;
}
h1 .after {
    display: inline; zoom: 1; /* that's inline-block for IE7-... and inline isn't required as span is already inline */
    width: 20px;
    height: 1px;
    vertical-align: middle;
    background-color: darkred;
}