Below is the content of a box I have:
https://i.sstatic.net/QmG5i.png
When the above box is hovered over, it flips to this:
https://i.sstatic.net/QsS9t.png
This block's HTML code is as follows:
<div class='tiles'>
<div class='col'>
<a href=""></a>
<a href="#"></a>
<a href="#"></a>
<a href=""></a>
<div class='box'></div>
</div>
I am using CSS to show before and after values using content:
.col:nth-child(2) .box:before {
content: "Maps Available";
background: #e4a001;
}
.col:nth-child(2) .box:after {
content:' Google Map : Click \A'
'Apple Map: Click \A \A';
background:#e4a001;
}In the code provided above, I want to add 'href' so that when the user clicks on 'click' (as shown in the second picture), they are directed to Google and Apple maps accordingly. I tried using attr(href) but it did not work. I also understand that href cannot be included in CSS. I acknowledge that CSS cannot achieve this. Is there any alternative solution available? Any assistance would be appreciated.