html - 动态 :After Pseudo-Element

Question

我的大脑并没有完全围绕这个:我正在使用我的 h1 上的 :before 和 :after 伪元素>。我的 h1 有一个 100% 宽度。

我希望 :after 是一个重复的背景图形，填充空白，后置文本，但无法弄清楚如何使它动态工作(即:标题是否是“Home”或“All About 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;
}