css text, font chữ đẹp

 

/***HTML***************/

<div class="section-title"> 

<span>Nổi bật</span>

<ul class="halim-popular-tab" role="tablist">

<li>
<a href="">aaaa</a>
</li>

<li>
<a href="">bbbb</a>
</li> 

</ul>

</div>

/***CSS***************/

.section-title {

    font-size: 16px;

    line-height: 11px;

    margin: 0;

    position: relative;

    text-transform: uppercase;

    display: flow-root;

}

.section-title:before {

    content: '';

    border-bottom: 1px solid #1e2732!important;

    position: absolute;

    bottom: 0;

    width: 100%;

}

.section-title span {

    float: left;

    font-size: 15px;

    padding: 10px 0;

    color: #a5cbef;

    background: -webkit-gradient(linear,left top,right top,from(#ff8a00),to(#da1b60));

    background: linear-gradient(to right,#ff8a00,#ff2070);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    -webkit-box-decoration-break: clone;

    box-decoration-break: clone;

    font-weight: 700;

}

.section-title span:before {

    content: '';

    position: absolute;

    bottom: 0;

    width: 100%;

    background: -webkit-gradient(linear,left top,right top,from(#ff8a00),to(#da1b60));

    background: linear-gradient(to right,#ff8a00,#ff2070);

    padding: 0.5px;

}

.section-title span:after {

    content: '';

}

.section-title .halim-popular-tab {

    padding: 0;

    position: absolute;

    right: 1px;

    top: 6.5px;

}

.halim-popular-tab li.active {

    background: #1b2a39;

    border: 1px solid #1b2a3900;

    background-size: 200% 100%;

    background-image: linear-gradient(to right,#f5ce62,#e43603,#fa7199,#e85a19);

    background-image: linear-gradient(to right,#f0c 0%,#339 51%,#f0c 100%);

    position: relative;

}

.halim-popular-tab li.active a {

    color: #fff;

}

.halim-popular-tab li a {

    font-size: 10px;

    font-weight: 400;

    text-transform: none;

    cursor: pointer;

}

.halim-popular-tab li.active:after {

    content: '';

    border-bottom: 6px solid #9919b2;

    border-left: 6px solid transparent;

    display: block;

    border-right: 6px solid transparent;

    bottom: -10px;

    left: 50%;

    position: absolute;

    -webkit-transform: translate(-50%,-50%) rotate(180deg);

    transform: translate(-50%,-50%) rotate(180deg);

    z-index: 1;

}