Динамический: после псевдоэлемента

Question

Мой мозг не совсем обертывается вокруг этого: я работаю с :before и псевдо элементами на моем h1. Мой h1 имеет 100% width.

Я хочу, чтобы :after был повторяющейся фоновой графикой, которая заполняет открытый пробел, пост-текст, но не может понять, как заставить эту работу динамически (то есть: будет ли название «Главная» или «Все о Awesome Products ", :after будет повторяться до тех пор, пока он не достигнет конца 100%).

Пример:

.main h1:before { 
    content:""; 
    display:inline-block; 
    background:url(images/before-services.jpg); 
    width:18px; 
    height:14px; 
    margin-right:10px; 
} 
.main h1 { 
    color:#373737; 
    text-shadow:0px 2px #5ac166; 
    text-transform:uppercase; 
    font-family: 'Mister Giacco Bold'; 
    font-size:2em; 
    width:100%; 
} 
.main h1:after { 
    content:""; 
    display:inline-block; 
    background:url(images/after-services.jpg) repeat-x; 
    width:80%; 
    height:15px; 
    margin-left:10px; 
} 

Answer 1

Я думаю, что это будет работать, но это требует дополнительного <span>

Codepen Demo

HTML

<h1><span>A Fancy Title</span></h1> 

CSS

h1 { 
    text-align:center; 
    position:relative; 
    display:inline-block; 
    width:100%; 
} 

h1 span { 
    display: inline-blspaock; 
    position: relative; 
} 

h1 span:before, 
h1 span:after { 
    content: ""; 
    position: absolute; 
    height: 100%; 
    background-color: red; 
    top: 0; 
    width: 100%; 
} 

h1 span:before { 
    right: 100%; 
    margin-right: 15px; 
} 
h1 span:after { 
    left: 100%; 
    margin-left: 15px; 
} 

Answer 2

можно практически уменьшить ширину до нуля :after с отрицательным правом margin, или установить его в absoluteposition, либо выбор, overflow:hidden на h1 будет полезно.

h1:before { 
    content:""; 
    display:inline-block; 
    background:red; 
    width:18px; 
    height:14px; 
    margin-right:10px; 
} 
h1 { 
    color:#373737; 
    text-shadow:0px 2px #5ac166; 
    text-transform:uppercase; 
    font-family: 'Mister Giacco Bold'; 
    font-size:2em; 
    overflow:hidden; 
} 
h1:after { 
    content:""; 
    display:inline-block; 
    background:blue; 
    width:100%; 
    height:15px; 
    margin-left:10px; 
    margin-right:-100%;/* reduce virtually size to 0 or use position:absolute + margin-top:~ 0.4em */ 
} 

http://codepen.io/anon/pen/wzGuh