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

不确定为什么要使用前后更改颜色。只需将 hover 设置为 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>

通过过渡更改 hr 数据内容的颜色

Change color of hr data-content with transition

html

javascript

css

transition

colors