How to use href in CONTENT css?

Question

I have the a box as follows :

On hover of the above box, the box flips to this:

This is the HTML code for the block:

<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 display 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;
        }

Now in the above code , I want to include 'href' such that when the user clicks on 'click'(as can be seen in second pic) the user is directed to google & apple maps accordingly. I tried to use attr(href) but it doesnot work. I also understand that we cannot put href in CSS . I understand that CSS cannot be used to achieve this. IS there any alternative out there ?? Any help is welcome.

I'm voting to close this question as off-topic because because this cannot be done using css — Pete, Feb 20 '18 at 10:58
I understand that CSS cannot be used . As I myself have mentioned that href cannot be included in css. I am searching for an alternative and so I have come here. — JAne, Feb 20 '18 at 11:00
Just put the text in the `` tags and show / hide them as you need. Don't use `:before` / `:after` at all. — Toastrackenigma, Feb 20 '18 at 11:01
@JAne. where you made flip animation? you need to two div that is front side and second side and then on second side you can add anchor — Sagar Kodte, Feb 20 '18 at 11:04
@Toastrackenigma please help. I kind of understand what you are saying , but there are many box like these , each with different content and I need to add urls in almost all. — JAne, Feb 20 '18 at 11:05

Toastrackenigma · Accepted Answer · 2018-02-22T08:59:23.170

1

Just show and hide the links as you need:

.box {
  width:150px;
  height:150px;
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}

.front, .back {
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  transition:transform 0.5s linear;
  background-color:#f44336;
  backface-visibility: hidden;
}

.back {
  transform:rotateY(180deg);
}

.box:hover .front {
  transform:rotateY(180deg);
}

.box:hover .back {
  transform:rotateY(0deg);
}

<div class="box">
  <div class="front">
    Maps
  </div>
  <div class="back">
    Google Map: <a href="http://www.google.com">Click</a>
    <br><br>
    Apple Map: <a href="http://www.apple.com">Click</a>
  </div>
</div>

edited Feb 22 '18 at 08:59

answered Feb 20 '18 at 11:05

Toastrackenigma

7,604
4
45
55

Thanks for the response.I tried this but it didnot help . Here is a fiddle : https://jsfiddle.net/tvaz7jtw/3/ – JAne Feb 22 '18 at 08:12
@JAne You're fiddle doesn't seem show anything on my browser. What are you trying to accomplish? Is it similar to what's in my code snippet? – Toastrackenigma Feb 22 '18 at 08:38
have included the box just to give you guys an idea of what the situation looks like at my end. Any help is much appreciated. – JAne Feb 22 '18 at 08:40
Please drag the below window in the fiddle UP to see the box – JAne Feb 22 '18 at 08:41
@JAne I've updated my answer too. This should do exactly what you need. – Toastrackenigma Feb 22 '18 at 08:59
Thanks a ton. I get it now . – JAne Feb 22 '18 at 09:04

How to use href in CONTENT css?

1 Answers1