如何根据嵌入的CSS类在HTML中显示不同文本与链接

你的问题核心在于两点：一是自定义标签默认不属于行内可交互元素，伪元素生成的文本无法关联到链接区域；二是同时保留两个链接标签会导致冗余，且未按类别控制显示逻辑。以下是具体修复方案：

方案一：用CSS+JS实现动态文本与链接 #

这种方式符合HTML规范，逻辑清晰易维护：

<style>
/* 基础样式：让链接容器成为行内可点击元素 */
.read-more-link {
  display: inline;
  color: blue;
  text-decoration: underline;
}

/* 苹果类别：设置伪元素文本和链接变量 */
.category-apples .read-more-link::after {
  content: " Apples";
}
.category-apples .read-more-link {
  --target-url: "https://testa.test.com/";
}

/* 橙子类别：设置伪元素文本和链接变量 */
.category-oranges .read-more-link::after {
  content: " Oranges";
}
.category-oranges .read-more-link {
  --target-url: "https://testo.test.com/";
}
</style>

<!-- 父容器添加对应类别，控制显示逻辑 -->
<div class="category-apples">
  <p>Read more about</p>
  <a class="read-more-link" href="#"></a>
</div>

<script>
// 动态读取CSS变量，设置链接地址
document.querySelectorAll('.read-more-link').forEach(link => {
  const url = getComputedStyle(link).getPropertyValue('--target-url').replace(/"/g, '');
  link.href = url;
});
</script>

方案二：纯CSS实现（无需JS） #

如果不想引入JS，可以用onclick绑定跳转逻辑，适合简单场景：

<style>
.read-more-link {
  display: inline;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

.category-apples .read-more-link::after {
  content: " Apples";
}
.category-oranges .read-more-link::after {
  content: " Oranges";
}
</style>

<div class="category-oranges">
  <p>Read more about</p>
  <span class="read-more-link" onclick="window.location.href='https://testo.test.com/'"></span>
</div>

关键说明 #

• 没必要用自定义标签，直接用<a>或<span>更符合HTML标准，避免兼容性问题。
• 伪元素生成的文本默认属于元素内容，但必须给元素设置display: inline或inline-block，才能让点击区域覆盖文本。
• CSS无法直接修改HTML的href属性，所以需要JS辅助读取变量；纯CSS方案则通过onclick绑定跳转。

内容的提问来源于stack exchange，提问作者Sam Garforth