CSS: после содержимого и абсолютного положения для кнопки делает его недоступным для вызова

Question

Я использую Ionic framework для разработки мобильного приложения и тестирую его с использованием эмулятора Ripple. Я не могу нажимать кнопки. Я думаю, эта проблема возникла вместе с обновлением Chrome, но я не уверен. Я изолировали проблему вниз к следующему CSS в ionic.css по умолчанию:

.button:after { 
    position: absolute; 
    top: -6px; 
    right: -6px; 
    bottom: -6px; 
    left: -6px; 
    content: ' '; } 

проблема может быть легко получено следующим образом:

<button class="button">hello</button> 

Пожалуйста, см http://codepen.io/anon/pen/bNXpaV

Кажется, это вызвано некоторым взаимодействием свойств позиции и содержимого. Я могу исправить проблему, удалив content: ' ' или установив content: normal во второй блок css (я не хочу изменять источник ionic.css) .... но почему это происходит?

Answer 1

Поскольку содержание :after охватывает всю страницу. Если вы добавили в CSS CSS background: red, вы бы это поняли.

Когда элемент position: absolute, то topleftright и bottom координаты относительно ближайшего родителя с указанным атрибутом position. В этом случае родительский элемент равен body.

События указателя не проходят через псевдоэлементы по умолчанию, поэтому вы не можете нажать кнопку через наложение (я надеюсь, что это имеет интуитивный смысл).

Попробуйте добавить pointer-events: none на :after. Теперь вы можете нажать кнопку, даже если она находится под красным блоком, потому что none указывает браузеру игнорировать события указателя на псевдоэлементе :after.

.button:after { 
    position: absolute; 
    top: -6px; 
    right: -6px; 
    bottom: -6px; 
    left: -6px; 
    content: ' '; 
    background: red; 
    pointer-events: none; 
} 

(см http://codepen.io/anon/pen/GgVZxV)