html - 一个 :before psuedo element before four h1. .?

Question

对于我的生活无法让他工作 - 我尝试在 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>

Answer 1

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