Изменить цвет данных hr с переходом

Question

У меня следующий код в HTML и CSS:

hr.hr-text {
    position: relative;
    border: none;
    height: 18px;
    background: rgb(51, 51, 51);
    -webkit-transition: color 1s; /* For Safari 3.0 to 6.0 */
    transition: color 1s display 2s; /* For modern browsers */   
}

hr.hr-text::before {
    content: attr(data-content);
    display: inline-block;
    background: #fff;
    font-weight: bold;
    font-size: 1.30rem;
    color: rgb(59, 59, 59);
    padding: 0.2rem 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
} 

hr.hr-text:hover::after{
    content: attr(data-content);
    display: inline-block;
    background: #fff;
    font-weight: bold;
    font-size: 1.30rem;
    color: #FF7550;
    padding: 0.2rem 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
}

<div>
    <hr data-content="Publicaciones más visitadas" class="hr-text">
</div>

Мне бы хотелось, чтобы изменение цвета "data-content" имело переход в несколько секунд. И если это возможно, измените цвет границы с переходом, тоже самое, что и «data-content». Как вы можете видеть, я пытаюсь использовать «-webkit-transition» и «transition», но это не работает. На самом деле, изменение цвета происходит мгновенно, выглядит хорошо, я хотел бы немного более плавного и мягкого, потому что я хочу использовать переход. Спасибо за помощь.

Answer 1

Не уверен, почему вы используете до и после, чтобы изменить цвет. Просто установите наведите курсор перед

hr.hr-text {
    position: relative;
    border: none;
    height: 18px;
    background-color: rgb(51, 51, 51);
    transition: background-color 1s;
}

hr.hr-text:hover {
    background-color: #FF7550;
    transition: background-color 1s;
}

hr.hr-text::before {
    content: attr(data-content);
    display: inline-block;
    background: #fff;
    font-weight: bold;
    font-size: 1.30rem;
    color: rgb(59, 59, 59);
    padding: 0.2rem 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    transition: color 1s;
} 

hr.hr-text:hover::before {
    color: #FF7550;
    transition: color 1s;
}

<div>
    <hr data-content="Publicaciones más visitadas" class="hr-text">
</div>