CODEWITHSUNDEEP
htmlcss
Valentin Verdegales
Valentin Verdegales

Reputation: 183

Duplicate an element and overlay it using css

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.

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

I mean something like this:

enter image description here

Use two typographies for the same element

I already tried to make something like this:

<a class="font1 font2" href="http://123">Sarah Morris</a>

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

.font2{
    font-family: abclight;
    font-size: 20px;
}

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

UPDATE

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

.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;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:100,800" rel="stylesheet">
<a href="javascript:void(0);" class="button" data-title="ABC">ABC</a>

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

I tried to make this but it doesn't work:

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

Upvotes: 0

Views: 2439

Answers (1)

vivekkupadhyay
vivekkupadhyay

Reputation: 2891

Using psuedo element and content: attr(data-title); you can easily achieve this, all you have to do is play with the right Font Families

Code Snippet:

.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;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:100,800" rel="stylesheet">
<a href="javascript:void(0);" class="button" data-title="ABC">ABC</a>

Upvotes: 2

Related Questions