Question

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

我希望:after是一个重复的背景图形，填补开放的空白，后文本，但无法弄清楚如何动态地使这个工作（即：标题是“主页”还是“所有关于令人敬畏的产品”，: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的宽度虚拟地减少到零，或者将其设置为absolute position，选择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

动态：伪元素之后

2 个答案: