Wie erstellt man diesen Texteffekt mit CSS?

Question

Ist es möglich, einen Texteffekt mit CSS zu erzeugen, indem man irgendein peudo Element verwendet? Dieser Effekt, bei dem sich ein Textelement hinter dem Überschriftentext befindet.

Answer 1

Ja, es ist möglich. Hier ist ein sehr einfaches Beispiel, das ich zusammen geworfen habe. Verwenden Sie im Wesentlichen einen position:absolute mit dem CSS-Selektor :before.

.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

Sie sollten unter einem ähnlichen Effekt mit absoluter Positionierung und einige verschachtelten Elementen, ähnlich den Beispiel-Code erreichen können.

<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

Ja! Versuchen Sie folgendes:

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

Hier ist eine Demo in JSFiddle: http://jsfiddle.net/usfrfdje/768/

Answer 4

Eine sehr einfache Art und Weise, diesen zu Ansatz wäre es, die Zahl explizit zu definieren, Fügen Sie in Ihrem HTML-Code dann ein Datenattribut hinzu, das den Inhalt über die Zahl anzeigt, indem Sie den Pseudo-Selektor vor: in CSS verwenden.

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

Sehen Sie sich eine Demo hier: 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/