使用粉底和HAML / SASS，您将如何实现这一目标？

Question

所以我正在使用zurb的基础，我正在努力完成上面图像的设计。我已经想出了几种不同的方法，但最可靠的方法就是这样。

.large-2.columns
  %h3 Our Products
.large-10.columns
  .arrow

正如您所看到的，这将使我们的产品和关于我们部分的箭头宽度相同。我正在寻找的是确保满足这些需求的最有效方法：

• 箭头和h3是可变宽度
• 箭头质量不随宽度变化而变化（线条/箭头/等都具有相同的宽度）
• 最好不要有TON的标记或TON of sass。

谢谢！

Answer 1

我建议使用：before和：after伪元素（连同内容）来实现这一点。除非你需要支持IE6 / 7，否则你必须做一些更难看的事情。

请记住：在目标元素内插入内容之前（但在目标元素内的任何子元素之前，并且对于：after元素也是如此 - 只是它会在任何子元素之后注入内容）。但是，如果我们使用绝对定位，我们仍然只能使用一个hr元素。

<强> CSS：

h3 {
  font-size: 0.85em;
  float: left;
}
hr {
  clear: none;
  background-color: #fff;
  margin-top: 0.75em;
  border-style: solid;
  border-color: green;
  border-width: 0 0 1px 0;
}
hr:before {
  content: '';
  position: absolute;
  background-color: red; /* can remove this, only for testing */
  display: block;
  width: 20px;
  height: 10px;
  margin-top: -5px;
  background-position: 0 0; /* set to correct pos for your sprites.gif background-image */
}
hr:after {
  position: absolute;
  background-color: red; /* can remove this, only for testing */
  right: 0.9375em;
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background-position: 0 0;
}

<强> HTML

<div class="row">
  <div class="large-12 columns">
    <h3>OUR PRODUCTS</h3><hr>
  </div>
</div>

为箭头使用背景图像精灵，并输入正确的x y坐标。 （背景颜色：红色只是为了表明这是有效的）