How would you realize this example? I found how to make one line, but how to make it overcome the border, so it worked correctly? This is what I have now:
.section1 {
width: 65%;
float: left;
background: #000000;
box-shadow: 20px 2px 25px #000000b0;
}
.category {
margin-bottom: 42px;
position: relative;
overflow: hidden;
}
.category a {
text-decoration: none;
color: #ffffff;
opacity: 0.5;
font-family: 'futura-pt-bold', sans-serif;
font-weight: bold;
font-size: 30px;
line-height: 30px;
text-transform: uppercase;
padding-right: 15px;
}
.category:hover::after {
content: '';
position: absolute;
top: 10px;
width: 100%;
border-bottom: 5px solid #f6cb02;
}
.descr {
display: none;
font-size: 17px;
line-height: 20px;
font-family: 'futura-pt-bold', sans-serif;
position: absolute;
width: 30%;
padding: 0 0 15px 15px;
}
.descr::before {
content: '';
position: absolute;
top: 25px;
left: -50px;
width: 15%;
border-bottom: 5px solid #f6cb02;
}
.category:hover .descr {
display: block;
}
<div class="section1">
<div class="h1-like">Академия</div>
<div class="services" id="services">
<div class="category">
<a href="">Лицензии</a>
<div class="descr">Тут возможно будет краткое описание выбранного раздела. В данном случае это краткое описание международных лицензий</div>
</div>
<div class="category"><a href="">Теоретический курс</a></div>
<div class="category"><a href="">Практический курс</a></div>
<div class="category"><a href="">Инструкторы</a></div>
<div class="category"><a href="">Классы обучения</a></div>
<div class="category"><a href="">Флотилии молодых капитанов</a></div>
</div>
</div>