ВотFIDDLE для тренировки.

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

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

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

HTML

<div class="container">
    <a href="http://example.com">
        <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