.nav1 a {
position: relative;
display: inline-block;
margin: 20px;
text-decoration: none;
}
.nav1 a::before {
content: "";
position: absolute;
top: 100%;
display: block;
width: 100%;
height: 3px;
background: linear-gradient(to right, violet calc(50% - 1px), transparent calc(50% - 1px), transparent calc(50% + 1px), violet calc(50% + 1px));
}
.nav2 a {
display: inline-block;
margin: 20px;
padding-bottom: 3px;
text-decoration: none;
background: linear-gradient(to right, violet calc(50% - 1px), transparent calc(50% - 1px), transparent calc(50% + 1px), violet calc(50% + 1px)) no-repeat bottom center / 100% 3px;
}<nav class="nav1">
<a href="">text</a>
<a href="">texttext</a>
</nav>
<nav class="nav2">
<a href="">text</a>
<a href="">texttext</a>
</nav>@font-face {
font-family: "OpenSans";
src: url("fonts/opensans.woff2") format("woff2")
url("fonts/opensans.woff") format("woff") ;
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "OpenSans";
src: url("fonts/opensansbold.woff2") format("woff2"),
url("fonts/opensansbold.woff") format("woff");
font-weight: 700;
font-style: normal;
}col:nth-child(2) {
background: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%) no-repeat top left / 2px 100%, linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%) no-repeat top right / 2px 100%,
linear-gradient(to left, #3acfd5, #3acfd5) no-repeat top / 100% 2px;
}Как width и heigh дива с bg-img, задать всё-таки в процентах % ?