如何在 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”，这样当用户点击“点击”时（如第二张图片所示），用户会被相应地定向到谷歌和苹果地图。我尝试使用 attr(href) 但它不起作用。我也明白我们不能把 href 放在 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>