Appearance
信息/信封
html
<span class="open-icon-info"></span>
<style>
.open-icon-info{
display: inline-block;
position: relative;
width: 16px;
height: 12px;
border-radius: var(--radius-box);
border: 1px solid var(--color-font-1);
transition: all .5s;
}
.open-icon-info::after{
content: '';
position: absolute;
top: 3px;
left: -1px;
width: 9px;
height: 0px;
border-bottom: 1px solid var(--color-font-1);
transform: rotate(38deg);
transition: all .5s;
}
.open-icon-info::before{
content: '';
position: absolute;
top: 3px;
right: -1px;
width: 9px;
height: 0px;
border-bottom: 1px solid var(--color-font-1);
transform: rotate(-38deg);
transition: all .5s;
}
.open-icon-info:hover,
.open-icon-info:hover::before,
.open-icon-info:hover::after{
border-color: var(--app-color-2);
}
</style>