Duplicate an element and overlay it using css
<p>I am making my first steps learning to code. I made some courses on Internet and now I decided to continue learning from the practice while I build a Wordpress child theme.</p>

<p>The thing that I want to achieve is to use two typographies (one over the other) in a div.</p>

<p>I mean something like this:</p>

<p><a href="https://i.stack.imgur.com/JTnWa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JTnWa.png" alt="enter image description here"></a></p>

<p>Use two typographies for the same element</p>

<p>I already tried to make something like this:</p>

<pre><code>&lt;a class="font1 font2" href="http://123"&gt;Sarah Morris&lt;/a&gt;

.font1{
    font-family: abcbold;
    font-size: 20px;
}

.font2{
    font-family: abclight;
    font-size: 20px;
}
</code></pre>

<p>But it doesn't work. Is there a way to make it without making two divs?</p>

<p><strong>UPDATE</strong></p>

<p>There is a solution for this problem. It's possible to achieve it using <code>content: attr(data-title);</code> as @vivekkupadhyay tells in his answer:</p>

<pre><code>.button {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: transparent;
  display: inline-block;
  height: 42px;
  padding: 0 1.5em;
  position: relative;
  border: none;
  outline: 0;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 40px;
  line-height: 44px;
  color: #000000;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.button:after {
  content: attr(data-title);
  z-index: 1;
  font-size: 30px;
  color: #f00;
  font-weight: 100;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
&lt;link href="https://fonts.googleapis.com/css?family=Open+Sans:100,800" rel="stylesheet"&gt;
&lt;a href="javascript:void(0);" class="button" data-title="ABC"&gt;ABC&lt;/a&gt;
</code></pre>

<p>But is it something possible to do using dynamic content in wordpress? A sit navigation for example.</p>

<p>I tried to make this but it doesn't work:</p>

<pre><code>&lt;nav id="social-navigation" class="social-navigation" role="navigation" aria-label="&lt;?php esc_attr_e( 'Social Links Menu', 'twentysixteen' ); ?&gt;" data-title="&lt;?php the_title(); ?&gt;     &lt;?php
        wp_nav_menu( array(
            'theme_location' =&gt; 'social',
            'menu_class'     =&gt; 'social-links-menu',
            'depth'          =&gt; 1,
            'link_before'    =&gt; '&lt;span class="screen-reader-text"&gt;',
            'link_after'     =&gt; '&lt;/span&gt;',
        ) );
    ?&gt;
        wp_nav_menu( array(
            'theme_location' =&gt; 'social',
            'menu_class'     =&gt; 'social-links-menu',
            'depth'          =&gt; 1,
            'link_before'    =&gt; '&lt;span class="screen-reader-text"&gt;',
            'link_after'     =&gt; '&lt;/span&gt;',
        ) );
    ?&gt;
&lt;/nav&gt; 
</code></pre>