Вопрос Красивое подчеркивание ссылок

[Sidd]

Нашел много всяких кодов, пробовал поставить, все как-то криво. Стиль Tactical UI.X. Перечитал xenforo.info, использовал разные классы и message и bbwraper, получается не красиво так как помимо ссылки задевает другие элементы, свернутое окно с цитатами и модальное окно видео.

Подскажите как сделать чтобы эффект для ссылок работал только для ссылок в тексте тем, сообщений, ресурсов, и больше ни к каким элементам не применялся?

В инете нашел вот такой код с эффектом:

a {
    display: inline-block;
    color:#ffeb3b;
    line-height: 1;
    text-decoration:none;
    cursor: pointer;
    position:relative;
}
a:after {
    background-color: #ffeb3b;
    display: block;
    content: "";
    height: 2px;
    width: 0%;
    left:50%;
    position:absolute;
    -webkit-transition: width .3s ease-in-out;
    -moz--transition: width .3s ease-in-out;
    transition: width .3s ease-in-out;
    -webkit-transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    transform:translateX(-50%);
}
a:hover:after,
a:focus:after {
    width: 100%;
}

Но применить его не получилось)

 

[Skaiman]

<div class="mylink">
    <a href="#"></a>
</div>

.mylink a {
    display: inline-block;
    color:#ffeb3b;
    line-height: 1;
    text-decoration:none;
    cursor: pointer;
    position:relative;
}
.mylink a:after {
    background-color: #ffeb3b;
    display: block;
    content: "";
    height: 2px;
    width: 0%;
    left:50%;
    position:absolute;
    -webkit-transition: width .3s ease-in-out;
    -moz--transition: width .3s ease-in-out;
    transition: width .3s ease-in-out;
    -webkit-transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    transform:translateX(-50%);
}
.mylink a:hover:after,
.mylink a:focus:after {
    width: 100%;
}

 

[Sidd]

Это нужно вставить в какой-то шаблон?)

<div class="mylink">
    <a href="#"></a>
</div>

 

[Skaiman]

Это пример, просто где ты использовать хочешь я не знаю, надо применять для ссылок родительский класс и тогда отображение будет для тех, для которых надо.

 

[Sidd]

Это пример, просто где ты использовать хочешь я не знаю, надо применять для ссылок родительский класс и тогда отображение будет для тех, для которых надо.

Мне хотя бы для простых ссылок в сообщениях, вот например Far Cry 5 | Siddgames.ru - Форум

 

[Skaiman]

.bbWrapper a {
    display: inline-block;
    color:#ffeb3b;
    line-height: 1;
    text-decoration:none;
    cursor: pointer;
    position:relative;
}
.bbWrapper a:after {
    background-color: #ffeb3b;
    display: block;
    content: "";
    height: 2px;
    width: 0%;
    left:50%;
    position:absolute;
    -webkit-transition: width .3s ease-in-out;
    -moz--transition: width .3s ease-in-out;
    transition: width .3s ease-in-out;
    -webkit-transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    transform:translateX(-50%);
}
.bbWrapper a:hover:after,
.bbWrapper a:focus:after {
    width: 100%;
}

 

[Sidd]

Это я уже пробовал, он там везде вставляет подчеркивание) и в модальное видео и в окно с цитатой и в ссылки в меню редактора

 

[Skaiman]

.bbWrapper .link.link--external {
    display: inline-block;
    color:#ffeb3b;
    line-height: 1;
    text-decoration:none;
    cursor: pointer;
    position:relative;
}
.bbWrapper .link.link--external:after {
    background-color: #ffeb3b;
    display: block;
    content: "";
    height: 2px;
    width: 0%;
    left:50%;
    position:absolute;
    -webkit-transition: width .3s ease-in-out;
    -moz--transition: width .3s ease-in-out;
    transition: width .3s ease-in-out;
    -webkit-transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    transform:translateX(-50%);
}
.bbWrapper .link.link--external:hover:after,
.bbWrapper .link.link--external:focus:after {
    width: 100%;
}

 

[Skaiman]

Проверил, работает вот less

.bbWrapper {
    .link {
        &.link--external {
            display: inline-block;
            color:#ffeb3b;
            line-height: 1;
            text-decoration:none;
            cursor: pointer;
            position:relative;
            &:after {
                background-color: #ffeb3b;
                display: block;
                content: "";
                height: 2px;
                width: 0%;
                left:50%;
                position:absolute;
                -webkit-transition: width .3s ease-in-out;
                -moz--transition: width .3s ease-in-out;
                transition: width .3s ease-in-out;
                -webkit-transform:translateX(-50%);
                -moz-transform:translateX(-50%);
                transform:translateX(-50%);           
            }
            &:hover:after, &:focus:after {
                width: 100%;
            }
        }
    }
}

 

[Chigra]

Доброе утро! Отлично получилось! Как правильно добавить к этим ссылкам иконку (это как пример, на самом деле я бы добавил MD иконку.

 

[Skaiman]

content | CSS | WebReference

 

[SeoMaestroKZ]

Проверил, работает вот less

.bbWrapper {
    .link {
        &.link--external {
            display: inline-block;
            color:#ffeb3b;
            line-height: 1;
            text-decoration:none;
            cursor: pointer;
            position:relative;
            &:after {
                background-color: #ffeb3b;
                display: block;
                content: "";
                height: 2px;
                width: 0%;
                left:50%;
                position:absolute;
                -webkit-transition: width .3s ease-in-out;
                -moz--transition: width .3s ease-in-out;
                transition: width .3s ease-in-out;
                -webkit-transform:translateX(-50%);
                -moz-transform:translateX(-50%);
                transform:translateX(-50%);          
            }
            &:hover:after, &:focus:after {
                width: 100%;
            }
        }
    }
}

О, спасибо! =) Пригодилось.

 

[Skaiman]

Надо картинки исключить, позже гляну.

 

[Chigra]

content | CSS | WebReference

Получается только перед ссылкой поставить, before ни как.

 

[Sidd]

Проверил, работает вот less

Ура! Спасибо! Все работает)

 

[Skaiman]

Chigra, все там можно сделать, вот пример, я убрал там лишнее, цвет ссылок сделал дефолтный и подчеркивание, добавил иконку в конце

.bbWrapper {
    .link {
        &.link--external {
            display: inline-block;
            text-decoration:none;
            font-weight: 500;
            position:relative;
            &:before {
                background-color: @xf-linkHoverColor;
                display: block;
                content: "";
                height: 2px;
                width: 0;
                left:50%;
                bottom: 0;
                position:absolute;
                transition: width .3s ease-in-out;
                transform:translateX(-50%);
            }
            &:hover:before {
                width: 100%;                 
            }
            &:after {
                font-family: 'FontAwesome';
                content: "\f08e";
                padding: 0 0 0 3px;
            }
        }
    }
}