防止“ :: after”,直到完成“转换”

问题描述 投票:0回答:1

我正在创建一个按钮,将其悬停时将其增加,然后显示>符号。我不明白该怎么做。我已经实现了所有内容,但是唯一不起作用的是,>一经悬停就会显示,并且文本会被包裹。

.start-quiz > button {
text-align: left;
padding-left: 25px;
width: 100px;
}

.start-quiz > button:hover {
width: 125px;
transition: width 0.5s linear;
}

.start-quiz > button:hover:after {
content: " >";
transition: content 0.5s ease;
}
css css-transitions transition
1个回答
0
投票
.start-quiz > button { text-align: left; padding-left: 25px; width: 100px; } .start-quiz > button:hover { width: 125px; transition: width 0.5s linear; } .start-quiz > button:after { content: " >"; opacity: 0; visibility: hidden; transition: opacity 0.5s ease; } .start-quiz > button:hover:after { visibility: visible; opacity: 1; }
© www.soinside.com 2019 - 2024. All rights reserved.