一:前四个h1之前的伪元素..?

时间:2014-11-25 22:25:25

标签: html css pseudo-element pseudo-class

因为我的生活无法让他工作 - 我试图在div中的一组h1标签之前插入一个图标字体。我可以在每个H1标签之前获得一个图标字体,但这不是我想要的。要重新迭代,div之前的一个图标字体,而不是每个h1。任何帮助都将受到大力赞赏。仅供参考 - H1中的文本包含animate.css淡入和延迟,因此单独的ID和标记。

.container{
  position:;
  margin:0px auto;
  background-color:pink;
  width:100%;
  height:100%;
  overflow: hidden;
}

.motto-text {
  position:absolute;
  display: ;
  bottom:;
  left:;
}

#hero-text .motto-text:before {
  font-family: icomoon;
  content: "\e600"; 
  display:block;
  height:25px;
  width:25px;
  padding-right:3px;
  text-align: center;
  font-size: 3em;
  float: left;
  position: relative;
  color: white;
}​
<div class="container">
  <div id="hero-text" class="motto-text"><!-- Hero text to start-->
    <h1 id="delayedText1" class="animated fadeIn delay-1">Line 1</h1>
    <h1 id="delayedText2" class="animated fadeIn delay-2">Line 2</h1>
    <h1 id="delayedText3" class="animated fadeIn delay-3">Line 3</h1>
    <h1 id="delayedText4" class="animated fadeIn delay-4">Line</h1>
  </div>
</div>

1 个答案:

答案 0 :(得分:0)

您的选择器错误:#hero-text .motto-text:before与标记中的任何元素都不匹配,因为它是子选择器。请改为使用#hero-text.motto-text:before#hero-text:before