如何用CSS创建这个文本效果？

Question

是否可以使用CSS使用一些peudo元素创建这样的文本效果？文本元素位于标题文本后面的效果。

Answer 1

是的！试试这个：

HTML：

<!-- use the custom "heading-number" attribute to insert content into the :after pseudo-element -->
<span class="numbered-heading" heading-number="01">Research</span>
<span class="numbered-heading" heading-number="02">Wireframing</span>

CSS：

.numbered-heading {
  display: block;
  position: relative;
  z-index: 10;
  margin: 20px;
}

.numbered-heading:after {
  display: block;
  content: attr(heading-number);

  /* Absolutely position the numbers here */
  position: absolute;
  z-index: -1;
  font-size: 3em;
  top: -20px;
  left: 0;
  color: #ccc;
}

这是JSFiddle中的一个演示：http://jsfiddle.net/usfrfdje/768/

Answer 2

是的，有可能。这是一个非常基本的例子，我把它放在一起。基本上，使用position:absolute CSS选择器

来使用:before

＆＃13;

＆＃13;

.block {
  float: left;
  width: 50%;
}

h2 {
  padding: 1em 0;
}

h2:before {
  content: attr(data-num);
  position: absolute;
  font-size: 3em;
  line-height: .4em;
  color: #eee;
}

h2 span {
  position: relative;
  z-index: 1;
}

＆＃13;

<div class="block">
  <h2 data-num="01"><span>Research</span></h2>
  <p>Lorem ipsum dolor sit amet</p>
  <p><a href="#">Find out more</a></p>
</div>
<div class="block">
  <h2 data-num="02"><span>Wireframing</span></h2>
  <p>Lorem ipsum dolor sit amet</p>
  <p><a href="#">Find out more</a></p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

一种非常简单的方法是在HTML中显式定义数字，然后添加一个数据属性，使用CSS中的：before伪选择器在数字上显示内容。

    <h1 data-text="Research">01</h1>

    h1 {
        font-size: 72px;
        color: #ccc;
        line-height: 0;
    }

    h1:before {
        content: attr(data-text);
        font-size: 20px;
        color: #333;
        position: absolute;
   }

在此处查看演示：https://codepen.io/anon/pen/eGOWLb

Answer 4

您应该能够使用绝对定位和一些嵌套元素来实现类似的效果，类似于下面的示例代码。

<div class="bgText">
Back Test
<span class="headingText">Front Text</span>
</div>

.bgText {
   position: relative;
   z-index: 0;
   font-size: 32px;
}
.headingText {
  position: absolute;
  left: 0;
  z-index: 1;
  font-size: 16px;
}

Answer 5

<div class="text-bg" data-bg-text="01">
  Research
</div>

.text-bg::before{
  content:attr(data-bg-text);
  position: absolute;
  opacity: 0.1;
  font-size: 4rem;
}
.text-bg{
  display:flex;
  align-items: center;
  margin-top:1rem;
}

https://jsfiddle.net/kalaikt/0ox6oj1u/