content: ""
.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>dropdown-item:hover {
background-color: green;
}
.dropdown-item.active, .dropdown-item:active {
background-color: green;
}@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;
}И вообще надо ли задавать фиксированную высоту блокам?
Но как решить данную проблему?
<div class="wrapper">
<div class="item"><input type="radio" name="range" id="r1"><label for="r1">200</label></div>
<div class="item"><input type="radio" name="range" id="r2" checked><label for="r2">500</label></div>
<div class="item"><input type="radio" name="range" id="r3"><label for="r3">600</label></div>
<div class="item"><input type="radio" name="range" id="r4"><label for="r4">800</label></div>
</div>.wrapper {
display: flex;
width: 300px;
margin: 30px;
background: linear-gradient(to right, orange, red) no-repeat center 20px/ 100% 3px;
}
.item {
position: relative;
padding-top: 30px;
width: 25%;
}
input {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
border: 0;
clip: rect(0 0 0 0)
}
label {
display: block;
padding-top: 10px;
text-align: center;
}
input:checked+label::before {
content: "";
position: absolute;
top: 8px;
width: 24px;
height: 24px;
border-radius: 50%;
background: #67B84C;
box-shadow: 0 0 0 3px #fff;
}background: linear-gradient(to top, #ffea00,#ffd000 85%, #ffd900);