.bc-highlight-title__anchor{
display: block;
width: fit-content;
height: fit-content;
}
.bc-highlight-title{
text-decoration: unset !important;
color: unset !important;
display: block;
height: fit-content;
width: fit-content;
}
.bc-highlight-title__element{
display: flex;
width: fit-content;
position: relative;
z-index: 0;
--after-background: #73fddf;
--height: 7px;
--duration: 0.3s;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
}
.bc-highlight-title__bottom-to-full::after, .bc-highlight-title__full-to-bottom::after,
.bc-highlight-title__left-to-full::after, .bc-highlight-title__full-to-left::after{
background-color: var(--after-background);
} .bc-highlight-title__bottom-to-full:after {
content: '';
position: absolute;
z-index: -1;
bottom: 0px;
left: 0;
width: 100%;
height: var(--height);
transition: var(--duration) var(--ease);
}
.bc-highlight-title__bottom-to-full:hover:after {
height: 100%;
} .bc-highlight-title__full-to-bottom:after {
content: '';
position: absolute;
z-index: -1;
bottom: 0px;
left: 0;
width: 100%;
height: 100%;
transition: var(--duration) var(--ease);
}
.bc-highlight-title__full-to-bottom:hover:after {
height: var(--height);
} .bc-highlight-title__left-to-full:after {
content: '';
position: absolute;
z-index: -1;
bottom: 0px;
left: 0;
width: var(--height);
height: 100%;
transition: var(--duration) var(--ease);
}
.bc-highlight-title__left-to-full:hover:after {
width: 100%;
} .bc-highlight-title__full-to-left:after {
content: '';
position: absolute;
z-index: -1;
bottom: 0px;
left: 0;
width: 100%;
height: 100%;
transition: var(--duration) var(--ease);
}
.bc-highlight-title__full-to-left:hover:after {
width: var(--height);
}