CSS

flex布局

Demo

文字带颜色下划线

p.underline         { color: #333 }
p.underline::after  { 
    content:""; 
    height: 2px; 
    background-color:#eee; 
    display: block; 
    margin-top: 10px; 
    border-left: solid 80px #ffc100;
}

文字带颜色下划线

文字两边带线

    p.withline {
        color: #00af98;
        text-align: center;
        display: flex;
        align-items: center;
        padding: 0 180px;
        margin-top: 30px;
    }
    p.withline::before,
    p.withline::after, {    
        content: "";
        flex: 1;
        background-color: #00af98;
        height: 2px;
        margin: 0 10px;
    }

文字两边带线

资料

Tips

  • A Space Between Inline-block list items

  • 字体对应

    • 100 - Thin
    • 200 - Extra Light (Ultra Light)
    • 300 - Light
    • 400 - Regular (Normal、Book、Roman)
    • 500 - Medium
    • 600 - Semi Bold (Demi Bold)
    • 700 - Bold
    • 800 - Extra Bold (Ultra Bold)
    • 900 - Black (Heavy)

Search

    欢迎关注我的微信公众号

    闷骚的程序员

    Table of Contents