Как правильно сверстать заголовок блока?

Question

[Justin Bieber]

Как сверстать, чтоб при наведении закладка с текстом двигалась вверх, но при этом не отрывалась от линии бордера?

<h3 class="block_header new_tab">
<a href="/drugie-novosti/">Это интересно</a>
</h3>

.block_header {
    line-height: 16px;
    color: #303030;
    text-align: right;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: "Roboto",sans-serif;
    border-bottom: 2px solid #A01818;
    margin: 0px 15px 0px 15px;
}
.new_tab:before {
    content: '';
    position: absolute;
    right: 174px;
    top: -6px;
    border-bottom: 24px solid #a01818;
    border-left: 30px solid white;
}
.new_tab a {
    background: #a01818;
    color: #fff !important;
    padding-top: 3px;
    padding-right: 7px;
    padding-left: 7px;
}
.new_tab a:hover {
    opacity: 1;
}

Answer 1

[PiggyPig]

Пробуйте, надеюсь, правильно понял.

https://jsfiddle.net/gn15ufmb/8/

Или другая версия:

https://jsfiddle.net/gn15ufmb/7/

Answer 2

[twobomb]

Можно так, но работает достаточно криво.