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

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>