Gerillass
v2.1.0* You can call mixins with or without the gls- namespace (e.g. @include gls-stretched-link();).
Suppose you have a container element with a link inside it, and you want the entire surface of that container to be clickable through the link. How can you do that?
The Stretched Link Sass mixin helps you do that. It spreads the clickable area of a link across the entire containing block.
Important: Note that the containing block must have the position: relative; style rule, and the mixin must be applied to only one of its children.
Arguments
| Name | Type | Description |
|---|---|---|
$value | string | Accepts the values before and after. If you do not pass a value, it targets the ::before pseudo-element of the selected elements. |
Sometimes you need to use both the ::before and ::after pseudo-elements of a link. That is why the mixin lets you choose where to apply the stretched link style rules.
Examples
If no value is passed, the ::before pseudo-element is targeted by default.
.element{
@include stretched-link;
}.element::before {
content: "";
position: absolute;
pointer-events: auto;
background-color: rgba(0, 0, 0, 0);
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}Pass either the before or the after option as an argument to choose which pseudo-element you want to target.
.element{
@include stretched-link(after);
}.element::after {
content: "";
position: absolute;
pointer-events: auto;
background-color: rgba(0, 0, 0, 0);
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}Targeting both the ::before and ::after pseudo-elements of the selected elements.
.element{
@include stretched-link(before);
&:after{
content: "\2192";
}
}@charset "UTF-8";
.element::before {
content: "";
position: absolute;
pointer-events: auto;
background-color: rgba(0, 0, 0, 0);
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
.element:after {
content: "→";
}Don't forget that the containing block must have the position: relative; style rule.
<div class="containing-element">
<a class="element" href="https://sample-site.com/">Stretched Link</a>
</div>.containing-element{
position: relative;
.element{
@include stretched-link(after);
}
}.containing-element {
position: relative;
}
.containing-element .element::after {
content: "";
position: absolute;
pointer-events: auto;
background-color: rgba(0, 0, 0, 0);
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}