带有透明BG的CSS前导点

时间:2014-10-30 15:12:44

标签: css

我正在寻找一种在文本元素之后创建前导点的方法。我需要在h1元素周围具有透明背景的东西。以下是我的解决方案需要看起来像:http://www.redhatsociety.com/sites/all/themes/red_hat_society/images/partners/sample.png

以下是我现在无法正常工作的内容:http://redhatsociety.com/rhs-hoot-day/prizes

任何人都知道这方面的解决方案吗?

1 个答案:

答案 0 :(得分:0)

使用像这样的伪元素。

Codepen Demo

h2 {
  position: relative;
  overflow: hidden;
  width:80% /* not required */

}

h2 span {
  display: inline-block;
  width:50%;
}

h2:after {
  content: "";
  position: absolute;
  top:50%;
  border: 3px red;
  border-style:dashed;
  width: 9999px;   /* some huge width */
}
<h2>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe error ea nam corporis hic libero culpa excepturi perspiciatis, necessitatibus</span>
</h2>