如何在CONTENT css中使用href？

Question

我有一个如下框：

在悬停上面的框时，框会翻转到：

这是块的HTML代码：

<div class='tiles'>
  <div class='col'>
    <a href=""></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href=""></a>
    <div class='box'></div>
  </div>

我正在使用CSS在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;
        }

现在在上面的代码中，我想要包含'href'，这样当用户点击'click'时（如第二张图片中所示），用户将被引导至google＆amp;苹果相应地图。我试图使用attr（href），但它不起作用。我也明白我们不能把CSS放在CSS中。 我知道CSS无法用来实现这一点。那里有没有其他选择？  欢迎任何帮助。

Answer 1

只需根据需要显示和隐藏链接：

.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>