使用过渡更改 hr 数据内容的颜色答案

【问题标题】：Change color of hr data-content with transition使用过渡更改 hr 数据内容的颜色
【发布时间】：2020-04-05 15:22:15
【问题描述】：

我在 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”，但这不起作用。实际上颜色的变化是瞬间的，看起来不错，我想要更平滑一些，那是因为我想使用过渡。感谢您的帮助。

【问题讨论】：

奇怪的是你用人力资源来做这个

标签： javascript html css colors transition

【解决方案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>

【讨论】：