通过转换更改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>

我希望“数据内容”颜色的更改具有几秒钟的过渡。并且如果可能的话，也可以通过过渡来更改边框颜色，就像“数据内容”一样。就像您看到的那样，我尝试使用“ -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>