如何实现卡片全域可点击且避免文本全部下划线？

我正在开发一个展示文章的可点击卡片界面，目前遇到两个问题：

• 无法让整个卡片区域都能被点击
• 卡片内的文本会出现下划线效果

我试过调整不同div元素并设置position:relative;，也了解过用链接的::after伪元素设置absolute定位的方法，但都没解决问题，希望得到帮助。

当前代码 #

CSS 代码 #

.main{
  max-width: 1200px;
  margin: 0 auto;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cards_item {
  display: flex;
  padding: 1rem;
}

@media (min-width: 40rem) {
  .cards_item {
    width: 50%;
  }
}

@media (min-width: 56rem) {
  .cards_item {
    width: 33.3333%;
  }
}

.card {
  background-color: white;
  border-radius: 0.3rem;
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position:relative;
}

.card_content {
  padding: 1rem;
  background: white;
  position:relative;
}

.card_title {
  color: #000000;
  font-size: 1.1rem;
  font-weight: 700;
  line-height:1rem;
  margin: 0px;
  margin-bottom: 1rem;
}

.card_text {
  color: #333333;
  font-size: 0.875rem;
  line-height: 1;
  margin-bottom: 1.25rem;    
  font-weight: 400;
}

/* link */

.fullclick li {
  list-style: none;
  margin: 1em 0;
  padding: 20px 10px;
  background: #2b2b2b;
  position: absolute;
  width: 100%;
}
.fullclick a {
  text-decoration:none !important;
}
.fullclick a.main {
  color: #85baff;
  text-align: right;
  display: block;
  z-index: 1;
  text-decoration:none !important;
  transition: all 0.8s ease;
}
.fullclick li a.main::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: ' ';
  width: 100%;
  text-decoration:none;
  transition: all 0.8s ease;
}

HTML 代码 #

<div class="main">
  <ul class="cards">
    <li class="cards_item">
      <div class="card">
        <a class="fullclick" href="#article-detail">
          <div class="card_image"><img src="article-image.jpg"></div>
          <div class="card_content">
            <h2 class="card_title">Pressley, Advocates, Survivors of Marathon Bombing Celebrate Passage of Congresswoman’s Post Disaster Mental Health Response Act</h2>
            <p class="card_text">February 21, 2023</p>
          </div>
        </a>
      </div>
    </li>
  </ul>
</div>

解决方案 #

问题出在fullclick类的CSS设置与HTML结构不匹配，以及链接样式处理有误，调整方案如下：

1. 清理无效CSS：移除fullclick类中针对li的样式——你的HTML里fullclick是<a>标签的类，不是父级li的类，这些样式完全无效。

2. 设置链接为块级元素：让<a>标签占满整个卡片空间，确保点击区域覆盖卡片：

   .fullclick {
     display: block;
     text-decoration: none; /* 彻底去掉下划线 */
     color: inherit; /* 继承父元素文本颜色，避免链接默认蓝色 */
     position: relative;
     flex: 1; /* 让链接填充.card的剩余空间，适配flex布局 */
   }
   

3. 用伪元素确保全区域可点击：依托.card的相对定位，给链接添加伪元素覆盖整个卡片：

   .card {
     /* 保留原有样式，确保作为伪元素的定位容器 */
     position: relative;
   }
   .fullclick::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0; /* 伪元素放在文本下方，不遮挡内容 */
   }
   

4. 调整文本样式优先级：移除!important的滥用，确保卡片内标题和文本的样式不受链接影响：

   .card_title, .card_text {
     position: relative;
     z-index: 1; /* 确保文本在伪元素上方，可正常选中 */
   }
   

调整后，整个卡片区域都会成为可点击的链接，同时卡片内文本不会出现下划线，内容样式也能正常保留。

内容的提问来源于stack exchange，提问作者Amanda Stone