如何用CSS样式表调用外部页面文本恢复文章链接副标题？

嘿，这个问题我之前折腾过！先给你明确说：纯CSS完全没法直接抓取另一个页面里的指定文本。CSS的content属性只能处理当前文档内的内容——比如固定字符串、元素的attr()属性值、计数器这些，想拉取外部页面的内容，已经超出它的能力范围了。

为什么你之前的尝试没用？ #

你写的.item-title:after { content: url(view-source:www.vidgamer.com/articles/2018/01/20/wing-commander-privateer#536) }，本质是把整个页面的源码当成一个资源加载，最终只会显示成一堆乱码的块，根本提取不到第536行的文本内容。

可行的替代方案 #

方案1：修改当前页面HTML（最稳定推荐）

如果能控制列表页面的HTML，把目标页面的副标题提前存到链接的data-*自定义属性里，比如：

<a href="www.vidgamer.com/articles/2018/01/20/wing-commander-privateer" data-subtitle="Does the spinoff sink or swim?">
  <h3 class="item-title">REVIEW - WING COMMANDER: PRIVATEER</h3>
</a>

然后用CSS的attr()调用这个属性，还能自定义样式：

.item-title:after {
  content: " — " attr(data-subtitle);
  font-size: 0.8em;
  color: #666;
  font-weight: normal;
  margin-left: 8px;
}

这样就能完美还原旧版本的显示效果，而且样式可控，完全不会出问题。

方案2：用JavaScript脚本提取（适合没法改HTML的情况）

如果没法修改列表页面的HTML，只能靠前端脚本（比如油猴Tampermonkey脚本）来实现。思路是：遍历所有列表链接，逐个请求目标页面，提取指定位置的文本，再插入到标题后面。

举个简单的示例脚本：

// 遍历所有标题元素
document.querySelectorAll('.item-title').forEach(titleEl => {
  const linkEl = titleEl.parentElement;
  // 请求目标页面
  fetch(linkEl.href)
    .then(response => response.text())
    .then(pageHtml => {
      // 按行拆分页面内容，注意数组索引从0开始，第536行对应索引535
      const pageLines = pageHtml.split('\n');
      const subtitleText = pageLines[535]?.trim();
      
      if (subtitleText) {
        // 创建副标题元素并添加样式
        const subtitleSpan = document.createElement('span');
        subtitleSpan.textContent = ` — ${subtitleText}`;
        subtitleSpan.style.cssText = `
          font-size: 0.8em;
          color: #666;
          font-weight: normal;
          margin-left: 8px;
        `;
        titleEl.appendChild(subtitleSpan);
      }
    })
    .catch(err => console.log('加载副标题失败:', err));
});

⚠️ 注意：如果目标网站没有开启CORS跨域许可，直接在浏览器里运行这个脚本会报错。这种情况下，推荐用Tampermonkey这类用户脚本管理器来运行，它能绕过跨域限制。

另外，不建议依赖行号提取——万一目标页面更新，行号很容易变动。如果副标题有固定的HTML结构（比如<h2 class="article-subtitle">），可以把提取逻辑改成更可靠的DOM解析：

.then(pageHtml => {
  const parser = new DOMParser();
  const targetDoc = parser.parseFromString(pageHtml, 'text/html');
  // 用选择器定位副标题
  const subtitleEl = targetDoc.querySelector('.article-subtitle');
  const subtitleText = subtitleEl?.textContent.trim();
  
  if (subtitleText) {
    // 插入逻辑同上
  }
})

总结 #

纯CSS实现不了跨页面文本提取，优先推荐方案1（存data属性），稳定又简单；没法改HTML的话，就用方案2的JS脚本实现。

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