<div class="container">
<div class="desc desc-line">Links</div>
<pre><code>a.link / &.underline / &.link-underline</code></pre>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna <a href="#" class="link" title="hyperlink">hyperlink</a> erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<pre><code>.link-icon-left</code></pre>
<a href="#" class="link-icon link-icon-left" title="Testlink"><i class="far fa-arrow-left"></i> Link-Icon</a>
<pre><code>.link-icon-right</code></pre>
<a href="#" class="link-icon link-icon-right" title="Testlink">Link-Icon <i class="far fa-arrow-right"></i> </a>
</div>
<div class="container">
<div class="desc desc-line">Links</div>
<pre><code>a.link / &.underline / &.link-underline</code></pre>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna <a href="#" class="link" title="hyperlink">hyperlink</a> erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<pre><code>.link-icon-left</code></pre>
<a href="#" class="link-icon link-icon-left" title="Testlink"><i class="far fa-arrow-left"></i> Link-Icon</a>
<pre><code>.link-icon-right</code></pre>
<a href="#" class="link-icon link-icon-right" title="Testlink">Link-Icon <i class="far fa-arrow-right"></i> </a>
</div>
/* Kein Inhalt definiert. */
.link-underline {
background-image: linear-gradient($accent,$accent);
background-size: 0% 1px;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background .3s ease;
&:hover, &.hover {
background-size: 100% 1px;
}
&.large {
font-size: 1.125rem;
font-weight: $font-weight-medium;
text-transform: uppercase;
}
}
a {
&.link, &.underline {
@extend .link-underline;
}
}
.link-icon {
display: inline-block;
font-size: 1.125rem;
font-weight: $font-weight-normal;
text-transform: uppercase;
&:hover, &.hover {
text-decoration: none;
}
> .fas, > .far, > .fal, > .fad, > .fab {
display: inline-block;
font-size: 1rem;
}
&-left {
> .fas, > .far, > .fal, > .fad, > .fab {
float: left;
margin-right: .5rem;
margin-top: .25rem;
}
}
&-right {
> .fas, > .far, > .fal, > .fad, > .fab {
float: right;
margin-left: .5rem;
margin-top: .125rem;
}
}
}
p > a {
font-weight: $font-weight-medium;
}