I'm making my first steps learning to code. I have been taken some courses on Internet since some months ago, and now I decided to continue learning from the practice while I build a Wordpress child theme.
The thing is that I want to duplicate an element and overlay it. Specifically I want to overlay two different typographies for one element.
I discover that it's something possible using pseudo-elements:
.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>Using ::after and ::before I see that I can duplicate two times my element to change the typography. But what if I want to duplicate 5 or more times the same element? And as I see it here (Can I have multiple :before pseudo-elements for the same element?) It's not possible using pseudo-elements.
I'm looking for a solution but I can't find it. I already tried to use two classes for the same element and like this I can write two times ::before and ::after but it doesn't work.
Do you have a suggestion?
Thank you for your help
