复制元素并使用css覆盖它 [英] Duplicate an element and overlay it using css

问题描述

我让我的第一步学习代码。我在互联网上做了一些课程，现在我决定继续从实践中学习，而我建立一个Wordpress子主题。

我想实现的事情是使用两个

我的意思是这样：

对同一元素使用两个排版。

这样做：

 < a class =font1 font2href =http：// 123> Sarah Morris< / a> 
 
 .font1 {
 font-family：abcbold; 
 font-size：20px; 
} 
 
 .font2 {
 font-family：abclight; 
 font-size：20px; 
} 
  

但它不工作。有没有办法让它没有两个div？

UPDATE

这个问题有一个解决方案。可以使用 content：attr（data-title）; 作为@vivekkupadhyay在他的回答中说：

  .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 =stylesheet> 
< a href =javascript：void（0）; class =buttondata-title =ABC> ABC< / a> 
  

但是是否可以使用WordPress中的动态内容？

我尝试这样做但不起作用：

 < nav id =social-navigationclass =social-navigationrole =navigationaria-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> b $ b'link_after'=>'< / span>'，
））; 
？> 
 wp_nav_menu（array（
'theme_location'=& social'，
'menu_class'=>'social-links-menu'，
'depth'=> 1，
'link_before'=& screen-reader-text>'，
'link_after'=>'< / span>'，
））; 
？> 
< / nav ; 
   
 
解决方案
 code>元素和内容：attr（data-title）; 你可以轻松实现这一点，你所要做的就是玩正确的字体
 
 
 
代码段：
 
 
 
 
 
 
  .button {-webkit-box-sizing：border-box; -moz-box-sizing：border-box; box-sizing：border-box;背景：透明; display：inline-block; height：42px; padding：0 1.5em;位置：相对; border：none;轮廓：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;颜色：＃f00; font-weight：100;显示：block; position：absolute; top：0; right：0; bottom：0; left：0;}  
 
 < link href = ：//fonts.googleapis.com/css？family = Open + Sans：100,800rel =stylesheet>< a href =javascript：void（0）; class =buttondata-title =ABC> 
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:



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> 

解决方案
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>





                        
这篇关于复制元素并使用css覆盖它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！