Как сделать область псевдоэлемента CSS доступной?

Здесь FIDDLE для игры.

Я создал <div class="foo"> и создал сгенерированный CSS-контент, используя .foo:after.
Я хочу, чтобы этот сгенерированный контент можно было щелкнуть, установив ссылку.

Если я закрою .foo якорем, он создает ссылку вокруг .foo и .foo:after.
Однако я хочу сделать область .foo:after кликабельного, но не самого .foo.

Есть ли способ, которым я могу достичь этого, используя чистый CSS? Возможно, изменение разметки?

HTML

<div class="container">
    <a href="#" onclick="location.href='http://example.com'; return false;">
        <div class="foo"></div>
    </a>
</div>

CSS

.foo{
    width: 400px;
    height: 150px;
    background-color: #DFBDE0;
}

.foo:after{
    content: "";
    position: absolute;
    background-color: #CB61CF;
    width: 100px;
    height: 100px;
    right: 0;
}

Screeshot

enter image description here

ОТВЕТЫ

Ответ 1

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

a {
  pointer-events: none;
}

.foo:after{
    pointer-events: all;
}

Вы должны поместить класс в ссылку, чтобы он не влиял на все ссылки.

Ответ 2

Я подтверждаю исправление, предложенное matchboxhero, и я разделяю озабоченность Роберрта.

Поэтому я предлагаю переместить свой специальный класс в себя или лучше применить его к внешнему контейнеру.

Другими словами, вы создаете конкретное поведение либо на элементе, который сам получает специальный класс (foo), либо его дочерние элементы. Но не родитель, или предыдущий/следующий родной брат, или что-то еще...:

.foo.container{
    width: 550px;
    position: relative;
}

.foo a div {
    width: 400px;
    height: 150px;
    background-color: #DFBDE0;
}

.foo a div:after{
    content: "";
    position: absolute;
    background-color: #CB61CF;
    width: 100px;
    height: 100px;
    right: 0;
}
.foo a {
  pointer-events: none;
}

.foo a div:after{
    pointer-events: all;
}
<div class="foo container">
    <a href="http://example.com">
        <div></div>
    </a>
</div>

Ответ 3

Есть ли причина, по которой кликабельный элемент должен быть сделан как :: после?

Потому что, если нет, то работа вокруг будет заключаться в том, чтобы поставить ваш якорь после.foo. Сохранение "position: absolute" дает ему ту же позицию, что и ваш :: после элемента, поскольку якорь все еще находится в контейнере div.

<div class="container">
  <div class="foo"></div>
  <a class="after" href="#" onclick="location.href='http://example.com'; return false;">CLICK ME !</a>
</div>

обновленная скрипка: http://jsfiddle.net/wagor93h/3/.

Таким образом, событие указателей на foo div все равно может произойти. (если текст, скажем, неспособный выбрать какой-либо из них, был бы не оптимальным)