一:在psuedo元素之前在四个h1之前..？

Question

我这一生都不能让他的图标工作--我正试着在一个div中的一组h1标签前插入一个图标字体。我可以在每个H1标签之前获得一个图标字体，但这不是我想要的。要重新迭代，请在div之前使用一个图标字体，而不是每个h1。任何帮助都将不胜感激。仅供参考- H1中的文本由淡入和延迟组成，因此有独立的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>

​

Answer 1

您有一个错误的选择器：#hero-text .motto-text:before不匹配您的标记中的任何元素，因为它是一个子选择器。请改用#hero-text.motto-text:before或仅使用#hero-text:before。