How to make a line that overcome the border?

时间:2018-02-26 17:59:44

标签: html css line

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>
        

0 个答案:

没有答案
相关问题