Change color of hr data-content with transition

Question

I have the follow code in HTML and 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>

I would like that the change of "data-content" color has a transition of a few seconds. And if it's posible change the border color with a transition too, same like "data-content". Like you can see I try using "-webkit-transition" and "transition" but this doesn't work. Actually the change of color is instantly, looks good with I would like some more smoth and soft, that is because I want to use a transition. Thanks for help.

Answer 1

Not sure why you are using before and after to change the color. Just set hover with the before

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>