Стилизация пагинатора?

Question

[Иван]

подскажите, как сделать такую же рамку(для страниц 1,2,3,4), чтобы был единый бордерд, но при этом при наведении на отдельную ссылку она подсвечивала только свои границы.
вот пример моего кода:

нужно вот так вот:

Comments

[Lord_Dantes]

Дать бордер райт или лефт только одним элементам.

[Иван]

slave bb, сделал как вы посоветовали. но возникла проблема, если навести на ссылку, которая рядом с активной ссылкой, то получается двойной бордер. как от этого избавиться?

[JackShcherbakov]

BenderIsGreat34, при наведении border-right: none;

[Иван]

JackShcherbakov, а если активная ссылка будет слева? тогда получится, что двойной бордер будет слева, что тогда делать?

[JackShcherbakov]

я бы если честно без списка бы делал. Я вам сейчас скину кусок кода с моего сайта. Просто скопируйте и под себя переделайте) https://codepen.io/CitizenOne/pen/VJGrwd

[Иван]

JackShcherbakov, неплохо. нашёл вот ещё c использованием псевдоэлементов, но по моему, это костыли:

завтра трезвым взглядом гляну на ваш код)

[Иван]

JackShcherbakov, я правильно понимаю, в вашем способе, при отключении js пагинатор перестает работать? у вас чисто на спанах, а значит тут переход сделать можно только при помощи js?
и к сожалению, я столкнулся с той же проблемой, что и до этого. как только начинаю указывать стили для ховера, опять активная ссылка наезжает бордером на ссылку по соседству с ховер-эффектом

[JackShcherbakov]

BenderIsGreat34, скиньте свой код, пожалуйста, я постараюсь исправить. Залейте на codepen

[JackShcherbakov]

BenderIsGreat34, если честно я вообще не понимаю, зачем тут вообще нужен список. Скиньте ваш код, я постараюсь сделать.

[Иван]

JackShcherbakov, в конечном результате я пришел к использованию псевдоэлементов.
ваш вариант мне не понравился тем, что вы используете спаны, то есть если у пользователя будет отключен js, то он не сможет воспользоваться перемещением, а так будут ссылки которые в любом случае откроются. псведоэлементы решают проблемы тем образом, что они создают новые границы поверх других и не мешают друг другу. так же мне пришлось сделать отдельно кнопки left-right потому что мне нужно их было полностью отделить от всех остальных.
мы можем с вами перейти в телеграм, мой юзернейм OsapBender

[JackShcherbakov]

BenderIsGreat34, меня нет в телеграмме, к сожалению. По поводу юзеров без js. Я на самом деле намеренно не поддерживаю таких юзеров, также как и юзеров с браузерами, которым по 40 лет. Да и сайт у меня для продвинутых юзеров (фриланс биржа), так что там пользователей без js редко встретишь. У вас какой-то двойной border при наведении появляется. Я бы делал без псевдо, так как в вашем случае там там рамки псевдоэлементов поверх рамок самого элемента накладываются, и что самое неприятное - это то, что видны ОБЕ рамки. Не знаю, как это точно словами описать, в общем там двойной бордер. Если вы его не видите - сделайте зум процентов 150 и наведите мышью.

Кстати, в моем варианте можно просто заменить span на a и все будет работать.

[Иван]

JackShcherbakov, понял вас. вот ваш код с моими добавками в плане hover-эффектов, где как раз-таки наезжают бордеры друг на друга.

[JackShcherbakov]

BenderIsGreat34, замените border на outline при hover и все будет отлично! Сейчас скину вам версию с таким изменением.

[JackShcherbakov]

BenderIsGreat34, https://codepen.io/CitizenOne/pen/VJGVgN что то в таком духе. Есть конечно небольшие косячки, но это все мелочи - фиксятся за 2 минуты : )

[JackShcherbakov]

BenderIsGreat34, outline все-таки не прокатит. Его углы скруглить нельзя

Answer 1

[Andrey Suha]

А если для каждого елемента кроме первого задать марджин лефт -1, ну или сколько толщина бордера и увеличивать z-index елемента на котором Ховер?

Comments

[Иван]

Andrey Suha ничего не меняется, попробовал