如何将 CSS 添加到链接预览？答案

【问题标题】：How to Add CSS to Link Preview?如何将 CSS 添加到链接预览？
【发布时间】：2018-07-07 23:27:48
【问题描述】：

我有这个 HTML：

  <a href="http://waterfordwhispersnews.com/2017/01/19/im-the-only-one-creating-jobs-around-here-local-drug-dealer-slams-government/#FB-Comments" class="link-preview" target="_blank" rel="nofollow">
    <div class="link-area">
      <div class="og-image">
        <a href="http://waterfordwhispersnews.com/wp-content/uploads/2017/01/grater.jpg" title="" class="fancybox" rel="article0">
          <img src="http://waterfordwhispersnews.com/wp-content/uploads/2017/01/grater.jpg">
        </a>
      </div>
      <div class="descriptions">
        <div class="og-title">
        “I’m The Only One Creating Jobs Around Here” Local Drug Dealer Slams Government
        </div>
        <div class="og-description">
          WATERFORD drug dealer Richie 'The Grater' Harrington has today slammed the Irish government for ignoring the young people in his council est…
        </div>
      </div>
    </div>
 </a>

看起来像这样：

我想添加 CSS 使它看起来更像 Facebook 帖子，但我不知道从哪里开始。

这个想法是新闻帖子的预览，我将在讨论它的博客帖子中链接。这是我用来生成它的 hexo 插件。 https://github.com/minamo173/hexo-tag-link-preview

至少，它需要被装箱。到目前为止，它只是继承了典型帖子的链接和图像的样式。

【问题讨论】：

标签： javascript html css hexo

【解决方案1】：

这里有一个建议，你可以怎么做，在标题上添加一个虚线边框、更大的字体 + 在锚点和标题上添加一些填充，让它看起来很好:)

还有一个小技巧 (display: table-caption)，让文本换行并适合图像下方。

我还删除了内部链接a，因为它对嵌套锚无效。

堆栈sn-p

a.link-preview {
  display: inline-block;
  border: 2px dotted black;
  padding: 5px;
}
a.link-preview .link-area {
  display: table-caption;              /*  make text wrap under image  */
}
a.link-preview .link-area .og-title {
  font-size: 22px;
  padding-bottom: 15px;
}

<a href="http://waterfordwhispersnews.com/2017/01/19/im-the-only-one-creating-jobs-around-here-local-drug-dealer-slams-government/#FB-Comments" class="link-preview" target="_blank" rel="nofollow">
  <div class="link-area">
    <div class="og-image">
        <img src="http://waterfordwhispersnews.com/wp-content/uploads/2017/01/grater.jpg">
    </div>
    <div class="descriptions">
      <div class="og-title">
        “I’m The Only One Creating Jobs Around Here” Local Drug Dealer Slams Government
      </div>
      <div class="og-description">
        WATERFORD drug dealer Richie 'The Grater' Harrington has today slammed the Irish government for ignoring the young people in his council est…
      </div>
    </div>
  </div>
</a>

【讨论】：

【解决方案2】：

我猜您正在寻找图像的缩略图和标题。

<div class="thumbnail">
  <a href="your_image_link.jpg">
    <img src="your_image_link.jpg">
    <div class="caption">
      <p>Lorem ipsum dolor</p>
    </div>
  </a>
</div>

参考：https://www.w3schools.com/bootstrap/bootstrap_images.asp

【讨论】：