Why doesn't the link effect apply to all links in the post?

Question

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.

Answer 1

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:

1. Make sure links never occupy more than 1 line. You can use white-space: nowrap;
2. Cumbersome. Using media queries split links manually for each view.
3. 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>