псевдоэлемент не сидит снаружи div с переполнением скрыто

Question

у меня есть div с переполнением-у: скрыто; и иметь псевдоэлемент справа от кнопок, которые я хочу расположить за пределами div, но он не будет работать. вот скрипка - http://jsfiddle.net/PAdSd/1/.

Но если я не дам div, он не будет переполнен. Вот эта скрипка - http://jsfiddle.net/PAdSd/2/.

Любая помощь будет прекрасна

Answer 1

Удалить position: relative из .nav.Вы можете увидеть результаты в этом jsfiddle .

По аналогичной проблеме я несколько дней бился головой о стену.Метод проб и ошибок и чистая случайность дали решение.Не уверен насчет кросс-браузерной совместимости, но он работает в chrome и firefox (при условии, что вы префиксите свои свойства css3 с -moz).

Answer 2

Вот еще один способ решения этой проблемы (особенно полезный, когда вы не можете просто удалить позицию: относительную, скажем, используя height: 100%; для псевдоэлемента):

Чтобы сделать содержимое видимымдобавьте отступы, скажем, 10px;Затем, чтобы убрать эффект заполнения для других элементов, используйте margin-bottom: -10px;

Итак:

.nav{
    background: transparent;
    height: auto;
    overflow-y: hidden;
    position: relative;
    /*new stuff*/
    padding-bottom:10px;
    margin-bottom:-10px;
}

Answer 3

Он скрыт, потому что это то, что вы сказали ему делать.

http://jsfiddle.net/PAdSd/3/

Если вы не хотите, чтобы он был скрыт, но все же хотите, чтобы переполнение было скрыто, вам нужно переместить его выше. .nav:after поместит контент в конец, но внутри тега nav.

Вы можете расположить его выше, отрегулировав верхнее значение css.

.nav:after{
    content: "";
    border-radius: 5px;
    background: #000;
    width: 10px;
    height: 10px;
    position: absolute;
    left: 500px;
    margin-left: 1px;
    top: 10px;
    box-shadow: -5px 5px 0px #8f0222;
    z-index: 20;
}

Или вы можете захотеть использовать body: after вместо этого, потому что это не звучит так, как будто вы на самом деле хотите, чтобы оно находилось внутри навигационной панели.