如何使用<a> tag with <content>tag

Question

When I try to put an <a> tag inside the content tag, the link is not active.

This is my 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);
}

This is my 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>

Moving a tag out of the div works but does not work inside.

Also, moving them out of the div would ruin the overall design.

If I delete the content: ''; part in css, the design disappears and a tag works, but I do not want to delete it. What should I do?

    .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与整个内容重叠。这使锚点不可点击。您需要找到其他逻辑，以便锚标记不会重叠。

可能的解决方法是使锚点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>

Answer 2

尚不清楚.cta .cta-inner:before伪元素的用途是什么，但它覆盖了父元素并因此覆盖了链接，从而使其无法访问。

但是，如果将pointer-events: none;添加到该CSS规则，它将允许单击“通过它”并使其中的链接可单击。