如何使用 CSS 创建这种文字效果？

Question

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

Answer 1

是的，这是可能的。这是我拼凑的一个非常基本的例子。本质上，使用 position:absolute 使用 :before CSS 选择器。

.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;
}

<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>

Answer 2

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

<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 3

是的！试试这个：

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 4

一个非常简单的方法是在 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 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/

如何使用 CSS 创建这种文字效果？

How to create this text effect with CSS?

css

pseudo-class

pseudo-element