为什么链接效应不适用于帖子中的所有链接？

发布于 2025-02-08 06:12:08 字数 1301 浏览 2 评论 0原文

我正在使用jekyll创建博客，主题为 indigo 。我决定使用网络上发现的SASS代码发挥链接效果。问题是，它并未显示在所有链接上。

这是代码：

      a:not(.exception) {
        text-decoration: none;
        color: #222;
        font-weight: 700;
        position: relative;
      }
      a:not(.exception)::before {
        content: "";
        background-color: #0396da;
        position: absolute;
        left: 0;
        bottom: 1px;
        width: 100%;
        height: 8px;
        z-index: -1;
        transition: all 0.3s ease-in-out;
      }
      a:not(.exception):hover::before {
        bottom: 0;
        height: 100%;
      }

        <p>
          Totam dolor aperiam <a href="https://example.com">consectetur</a>. Cum
          quia itaque ut
          <a href="https://example.com">ipsum laudantium rerum</a> consequatur.
          Soluta ex <a href="https://example.com">itaque repellat quas</a>.
          Voluptas ut similique saepe voluptatem eos architecto quaerat et.
        </p>

为什么会发生这种情况？谢谢。

原文

I'm creating a blog using Jekyll, and a theme called Indigo. I decided to put on a link effect, using Sass code I found on the net. Problem is, it's not showing up on all the links.

Here's the code:

      a:not(.exception) {
        text-decoration: none;
        color: #222;
        font-weight: 700;
        position: relative;
      }
      a:not(.exception)::before {
        content: "";
        background-color: #0396da;
        position: absolute;
        left: 0;
        bottom: 1px;
        width: 100%;
        height: 8px;
        z-index: -1;
        transition: all 0.3s ease-in-out;
      }
      a:not(.exception):hover::before {
        bottom: 0;
        height: 100%;
      }

        <p>
          Totam dolor aperiam <a href="https://example.com">consectetur</a>. Cum
          quia itaque ut
          <a href="https://example.com">ipsum laudantium rerum</a> consequatur.
          Soluta ex <a href="https://example.com">itaque repellat quas</a>.
          Voluptas ut similique saepe voluptatem eos architecto quaerat et.
        </p>

Why could this happen? Thank you.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

断肠人 2025-02-15 06:12:08

这个问题会影响被迫在两行之间打破的每个链接。原因是效果的执行方式，伪元素::在创建一个矩形之前，该矩形无法分裂以跟随单词流。提出解决方案：

确保链接永远不会超过1行。您可以使用白空间：NowRap;
麻烦。使用媒体查询为每个视图手动拆分链接。
重新设计效果。例如：

a:not(.exception) {
  text-decoration: none;
  color: #222;
  font-weight: 700;
  position: relative;
  background-image: linear-gradient(to top, rgb(28, 191, 255) 5px, rgb(255, 255, 255) 0px);
}

a:not(.exception):hover {
  background-image: linear-gradient(to top, rgb(28, 191, 255) 15px, rgb(255, 255, 255) 0px);
}

        <p>
            Totam dolor aperiam <a href="https://example.com">consectetur</a>. Cum
            quia itaque ut
            <a href="https://example.com">ipsum laudantium rerum</a> consequatur.
            Soluta ex <a href="https://example.com">itaque repellat quas</a>. Voluptas
            ut similique saepe voluptatem eos architecto quaerat et.
        </p>

The issue affects every link that is forced to break between two lines. The cause is the way the effect is carried out, pseudo element ::before creates a single rectangle that has no way of splitting up to follow words flow. Posible solutions:

Make sure links never occupy more than 1 line. You can use white-space: nowrap;
Cumbersome. Using media queries split links manually for each view.
Redesign the effect. For example:

a:not(.exception) {
  text-decoration: none;
  color: #222;
  font-weight: 700;
  position: relative;
  background-image: linear-gradient(to top, rgb(28, 191, 255) 5px, rgb(255, 255, 255) 0px);
}

a:not(.exception):hover {
  background-image: linear-gradient(to top, rgb(28, 191, 255) 15px, rgb(255, 255, 255) 0px);
}

        <p>
            Totam dolor aperiam <a href="https://example.com">consectetur</a>. Cum
            quia itaque ut
            <a href="https://example.com">ipsum laudantium rerum</a> consequatur.
            Soluta ex <a href="https://example.com">itaque repellat quas</a>. Voluptas
            ut similique saepe voluptatem eos architecto quaerat et.
        </p>

回复收藏 0 原文

~没有更多了~