Я просто сделал противоположное, используя :after
и::after
потому, что мне нужно было сделать мою нижнюю границу ровно 1.3rem
шире:
Мой элемент сильно деформировался, когда я использовал, :before
и :after
в то же время, потому что элементы выровнены по горизонтали display: flex
, flex-direction: row
иalign-items: center
.
Вы можете использовать это для создания чего-то более широкого или узкого, или, возможно, любых модов математических измерений:
a.nav_link-active {
color: $e1-red;
margin-top: 3.7rem;
}
a.nav_link-active:visited {
color: $e1-red;
}
a.nav_link-active:after {
content: '';
margin-top: 3.3rem; // margin and height should
height: 0.4rem; // add up to active link margin
background: $e1-red;
margin-left: -$nav-spacer-margin;
display: block;
}
a.nav_link-active::after {
content: '';
margin-top: 3.3rem; // margin and height should
height: 0.4rem; // add up to active link margin
background: $e1-red;
margin-right: -$nav-spacer-margin;
display: block;
}
Извините, SCSS
просто умножьте числа на 10 и замените переменные на нормальные значения.
div:before
left: 50px
.