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

Sidd

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

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

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

CSS:
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

Администратор
Регистрация
29.06.18
Сообщения
1 555
Решения
12
Реакции
1 193
Баллы
85
HTML:
<div class="mylink">
    <a href="#"></a>
</div>
CSS:
.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

Проверенный
Регистрация
13.07.18
Сообщения
55
Реакции
13
Баллы
45
Это нужно вставить в какой-то шаблон?)
Код:
<div class="mylink">
    <a href="#"></a>
</div>

:unsure:
 

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
1 555
Решения
12
Реакции
1 193
Баллы
85
Это пример, просто где ты использовать хочешь я не знаю, надо применять для ссылок родительский класс и тогда отображение будет для тех, для которых надо.
 

Sidd

Проверенный
Регистрация
13.07.18
Сообщения
55
Реакции
13
Баллы
45
Это пример, просто где ты использовать хочешь я не знаю, надо применять для ссылок родительский класс и тогда отображение будет для тех, для которых надо.
Мне хотя бы для простых ссылок в сообщениях, вот например Far Cry 5 | Siddgames.ru - Форум
 

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
1 555
Решения
12
Реакции
1 193
Баллы
85
CSS:
.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

Проверенный
Регистрация
13.07.18
Сообщения
55
Реакции
13
Баллы
45
Это я уже пробовал, он там везде вставляет подчеркивание) и в модальное видео и в окно с цитатой и в ссылки в меню редактора

c6rvvpg[1].png
 

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
1 555
Решения
12
Реакции
1 193
Баллы
85
CSS:
.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

Администратор
Регистрация
29.06.18
Сообщения
1 555
Решения
12
Реакции
1 193
Баллы
85
Проверил, работает :) вот less
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

Проверенный
Регистрация
11.07.18
Сообщения
43
Реакции
14
Баллы
25
Доброе утро! Отлично получилось! Как правильно добавить к этим ссылкам иконку external_link-512~01~01.png (это как пример, на самом деле я бы добавил MD иконку.
 

SeoMaestroKZ

Проверенный
Регистрация
10.09.18
Сообщения
6
Реакции
1
Баллы
35
Проверил, работает :) вот less
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

Администратор
Регистрация
29.06.18
Сообщения
1 555
Решения
12
Реакции
1 193
Баллы
85
Надо картинки исключить, позже гляну.
 

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
1 555
Решения
12
Реакции
1 193
Баллы
85
Chigra, все там можно сделать, вот пример, я убрал там лишнее, цвет ссылок сделал дефолтный и подчеркивание, добавил иконку в конце
Less:
.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;
            }
        }
    }
}
 
Верх Низ