如何使用<a>标签</a> <content> <a>标签</a>

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

可能的解决方法是使锚点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伪元素.cta .cta-inner:before的目的是什么，但是它覆盖了父元素并因此覆盖了链接，从而使其无法访问。

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