A simple way to underline single line links

    In a recent digest with fresh materials from the world of the front-end, I saw a selection of ways to underline CSS .

    It is strange that such a good collection does not indicate a simple method using the: after pseudo-class.



    Advantages of this method:
    + Ease of use;
    + Ample opportunities for settings (positioning, style, thickness, line color);
    + Works on any background;
    + Does not depend on zooming (if the text remains single-line)

    Cons:
    - Not suitable for underlining multi-line text;

    Perhaps there are some other disadvantages. I would be grateful for the tips.

    <spanclass='inline-block decorated-link'>Ссылка в спане с {display: inline-block;} </span><br><br><ahref='#'class='decorated-link'>Обычная ссылка</a>


    .decorated-link {
        color: #337ab7;
        position: relative;
        text-decoration: none;
        cursor: pointer;
    }
    .decorated-link:hover {
        text-decoration: none;
        color: red;
    }
    .decorated-link:after {
        content: '';
        position: absolute;
        right: 0;
        left: 0;
        bottom: 1px;
        width: 100%;
        border-bottom: thin dashed rgba(51, 122, 181, 0.4);
    }
    .decorated-link:hover:after {
        border-color: rgba(255, 0, 0, 0.3);;
    }
    a.decorated-link:after {
        bottom: 0;
    }
    .inline-block {
        display: inline-block;
    }
    

    Also popular now: