如何在Drupal区块标题旁添加跳转至更多新闻的链接？

首先明确：CSS无法实现给伪元素添加可跳转的链接。因为伪元素（比如::after）是CSS生成的虚拟渲染元素，不属于DOM结构的一部分，没办法赋予它<a>标签的跳转功能，只能用来展示静态文本或图标。

给你两个可行的解决方案：

方案1：修改Drupal区块模板（推荐） #

这是最规范的做法，直接从根源调整HTML结构：

• 找到Drupal主题里的区块模板文件（通常是block.html.twig）
• 定位到区块标题的输出代码，在标题文本后添加<a>标签，示例：

  {% if label %}
    <h2{{ title_attributes.addClass('block__title') }}>
      {{ label }}
      <a href="/your-more-news-url" class="block-more-link">更多新闻</a>
    </h2>
  {% endif %}
  

• 之后用CSS调整这个链接的样式即可，比伪元素方案更灵活，也符合HTML语义规范。

方案2：用JavaScript动态添加链接 #

如果暂时无法修改模板，可以用JS在页面加载后插入链接元素：

// 替换成你实际的区块标题选择器
const blockTitle = document.querySelector('.block__title');
if (blockTitle) {
  const moreLink = document.createElement('a');
  moreLink.href = '/your-more-news-url';
  // 可自定义文本或添加图标类
  moreLink.innerHTML = '<span class="icon"></span> 更多';
  moreLink.classList.add('block-more-link');
  // 将链接插入到标题末尾
  blockTitle.appendChild(moreLink);
}

后续用CSS给.block-more-link设置样式，和你之前用伪元素的写法保持一致即可。

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