html自定义属性，css使用属性值

前言

html其实可以支持自定义属性，然后结合css的伪类可以做一些东西。

实例

 <div schedule-desc="abcd" class="schedule-item "></div>

 .schedule-item {
    
    
    width: 20px;
    height: 20px;
    margin-right: 100px;
    margin-bottom: 40px;
    color: #888888;
    border-radius: 50%;
    cursor: pointer;

    position: relative;

    &::before {
    
    
        content: attr(schedule-desc);
        position: absolute;
        top: 26px;
        left: -30px;
        font-size: 10px;
        width: 100px;
    }

    &::after {
    
    
        content: '';
        position: absolute;
        width: 105px;
        height: 2px;
        background: #E3EAF6;
        top: 10px;
        left: 20px;
    }
}