html - 如何将 标签与 标签一起使用

Question

当我尝试输入 <a>内容标签内的标签，链接未激活。

这是我的 CSS。

.cta {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: rgba(0, 32, 96, 0.1);
}

.cta .cta-inner {
    position: relative;
    padding: 3rem;
    margin: 0.5rem;
    background-color: rgba(255, 255, 255, 0.85);
}

.cta .cta-inner:before {
    border-radius: 0.5rem;
    content: '';
    position: absolute;
    top: -0.5rem;
    bottom: -0.5rem;
    left: -0.5rem;
    right: -0.5rem;
    border: 0.25rem solid rgba(255, 255, 255, 0.85);
}

这是我的HTML

<div class="cta-inner text-center rounded">
  <h2 class="section-heading mb-4">
    <span class="section-heading-upper">For you</span>
    <span class="section-heading-lower">LikeLion × 7th</span>
    </h2>
     <p class="mb-0">~~~~~~~</p>
     <a href='url_adress' target='_blank'>클릭!</a>
</div>

将标签移出 div 有效，但在内部无效。

此外，将它们移出 div 会破坏整体设计。

如果我删除 content: '';部分在 css 中，设计消失，标签有效，但我不想删除它。我该怎么办？

    .cta {
        padding-top: 5rem;
        padding-bottom: 5rem;
        background-color: rgba(0, 32, 96, 0.1);
    }
    
    .cta .cta-inner {
        position: relative;
        padding: 3rem;
        margin: 0.5rem;
        background-color: rgba(255, 255, 255, 0.85);
    }
    
    .cta .cta-inner:before {
        border-radius: 0.5rem;
        content: '';
        position: absolute;
        top: -0.5rem;
        bottom: -0.5rem;
        left: -0.5rem;
        right: -0.5rem;
        border: 0.25rem solid rgba(255, 255, 255, 0.85);
    }

  

<div class="cta-inner text-center rounded">
  <h2 class="section-heading mb-4">
    <span class="section-heading-upper">For you</span>
    <span class="section-heading-lower">LikeLion × 7th</span>
  </h2>
  <p class="mb-0">~~~~~~~</p>
  <a href='url_adress' target='_blank'>클릭!</a>
</div>

Answer 1

您的 .cta .cta-inner:before 与整个内容重叠。这使您的 anchor 不可点击。您需要找到不同的逻辑，以便 anchor 标记不会重叠。

一个可能的解决方法是使 anchor position:absolute

.cta .cta-inner a {
    position: absolute;
}

请在此处查看工作代码，但不确定它如何影响您的整个页面。

.cta {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: rgba(0, 32, 96, 0.1);
}

.cta .cta-inner {
    position: relative;
    padding: 3rem;
    margin: 0.5rem;
    background-color: rgba(255, 255, 255, 0.85);
}

.cta .cta-inner:before {
    border-radius: 0.5rem;
    content: '';
    position: absolute;
    top: -0.5rem;
    bottom: -0.5rem;
    left: -0.5rem;
    right: -0.5rem;
    border: 0.25rem solid rgba(255, 255, 255, 0.85);
}
.cta .cta-inner a {
  position:absolute;
}

<div class="cta">


  <div class="cta-inner text-center rounded">
    <h2 class="section-heading mb-4">
      <span class="section-heading-upper">For you</span>
      <span class="section-heading-lower">LikeLion × 7th</span>
    </h2>
    <p class="mb-0">~~~~~~~</p>
    <a href='url_adress' target='_blank'>클릭!</a>
  </div>
</div>