A CodePen by herbnerder. Styling adjacent links - It can be hard to tell two links apart when they are directly adjacent to each other. It is even harder when you remove the underline (the spaces between links help). Make sure to account for it somehow.

index.html

<h1>Styling Adjacent Links</h1>

<p class="contrast">People like to remove link underlines because they are seen as ugly. But, people also <a href="#">like to do that thing</a> <a href="#">where they link up several adjacent strings</a> of text or <a href="#">even</a> <a href="#">make</a> <a href="#">each</a> <a href="#">word</a> <a href="#">a</a> <a href="#">different</a> <a href="#">link.</a></p>

<p><a href="#">Linking that way</a> <a href="#">lets you fit a lot of info</a> <a href="#">into a small space.</a> <a href="#">But if you are removing the underlines,</a> <a href="#">it becomes hard to tell</a> <a href="#">that they are even separate links.</a></p>
  
<p class="underline"><a href="#">You</a> <a href="#">could</a> <a href="#">just</a> <a href="#">leave</a> <a href="#">the</a> <a href="#">underline</a> <a href="#">alone.</a></p>
  
<p>But, if you insist, maybe you could at least give every 2nd link a slightly differently treatment so that users can tell them apart?</p>

<h2>Shade</h2>
<p class="shade">Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing elit,</a> sed do eiusmod tempor incididunt ut <a href="#">labore et dolore magna aliqua.</a> Ut enim <a href="#">ad</a> <a href="#">minim</a> <a href="#">veniam,</a> <a href="#">quis</a> nostrud exercitation <a href="#">ullamco</a> <a href="#">laboris</a> <a href="#">nisi.</a></p>

<h2>Italic</h2>
<p class="italic">Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing elit,</a> sed do eiusmod tempor incididunt ut <a href="#">labore et dolore magna aliqua.</a> Ut enim <a href="#">ad</a> <a href="#">minim</a> <a href="#">veniam,</a> <a href="#">quis</a> nostrud exercitation <a href="#">ullamco</a> <a href="#">laboris</a> <a href="#">nisi.</a></p>

<h2>Weight</h2>
<p class="weight">Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing elit,</a> sed do eiusmod tempor incididunt ut <a href="#">labore et dolore magna aliqua.</a> Ut enim <a href="#">ad</a> <a href="#">minim</a> <a href="#">veniam,</a> <a href="#">quis</a> nostrud exercitation <a href="#">ullamco</a> <a href="#">laboris</a> <a href="#">nisi.</a></p>

<h2>Colorful</h2>
<p class="colorful">Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing elit,</a> sed do eiusmod tempor incididunt ut <a href="#">labore et dolore magna aliqua.</a> Ut enim <a href="#">ad</a> <a href="#">minim</a> <a href="#">veniam,</a> <a href="#">quis</a> nostrud exercitation <a href="#">ullamco</a> <a href="#">laboris</a> <a href="#">nisi.</a></p>

<p>You get the idea. But, keep in mind that these might still cause problems. For instance, the style differences in the "shade" example may be too subtle for some people to see.</p>

<p>And, don't forget to declare visited/focus/hover/active states. Those are also needed, but they don't solve this problem. You could style hover states differently, but that doesn't help if the person glances over the paragraph and never hovers. They simply wouldn't notice the treasure trove of links that you stashed there.</p>

<p>It also would help to choose your link text well, context can be key to understanding what you are linking to.</p>

style.scss

@import "compass";
body {
  font: 100 normal 125%/1.4 sans-serif;
  max-width: 30em;
  margin: 0 auto;
  padding: 2em;
}

$link: hsl(200,100%,50%);

a {
  /* Remove underline just because that's the starting assumption*/
  text-decoration: none;  
  color: $link;
}

/* An extreme example showing the idea */
.contrast {
  a {  
    color: red;
  }
/* Give every 2nd link a different treatment so you can tell them apart. */
  a:nth-of-type(even) {
    color: green;
  }
}

.underline {
  a {
    color: $link;
    text-decoration: underline;
  }
}

.shade {
  a:nth-of-type(even) {
    color: darken($link,10%);
  }
}

.italic {
  a {
    font-style: normal;
  }
  a:nth-of-type(even) {
    font-style: italic;
  }
}

.weight {
  a {
    font-weight: normal;
  }
  a:nth-of-type(even) {
    font-weight: bold;
  }
}

.colorful {
  a {
    background: black;
    color: white;
  }
  a:nth-of-type(4n - 3) {
    background: hsl(0,100%,50%);
  }
  a:nth-of-type(4n - 2) {
    background: hsl(40,100%,50%);
  }
  a:nth-of-type(4n - 1) {
    background: hsl(200,100%,50%);
  }
  a:nth-of-type(4n) {
    background: hsl(280,100%,50%);
  }  
}