Как присвоить псевдо элемент переменной
 

Как например присваивание getElementById, но нужно взять псевдо элемент ::after у элемента c id = 'el1'.
Ну или если проще, то нужно отследить щелчок мыши по псевдо-элементу ::after.

window.getComputedStyle(document.getElementById('el1'), ':before')

- не работает как надо!

Все работает:

<style>
#el1:before{
    content: 'Все работает!';
}
</style>

<div id="el1"></div>

<script>
var style = window.getComputedStyle(document.getElementById('el1'), ':before');
alert(style.content);
</script>

Только причем тут click?
Насколько я знаю - к псевдоэлементам доступа из js нет (кроме получения вычисленных стилей). Нужно просто избегать таких задач - зачем усложнять себе жизнь?

Никак
Псевдо элемент это не элемент страницы это просто набор CSS стилей
т.е. псевдо элемент невозможно получить как элемент HTML страницы у псевдоэлемента нет событий это просто набор стилей.
И работать с этими стилями можно точно так же как и с другими стилями на странице.

<style>
#el1:before{
    content: 'Все работает!';
}
</style>
 <div id="el1"></div>
 <script>
var CSSrules = document.styleSheets[0].cssRules[0].style;
var str = "Доступ из JS возможен";
var i = 0;
	setInterval( animate , 100 );
	function animate (){
		i++>30?i=1:0;
		CSSrules.cssText = "content:'"+ str.substr(0,i)+"'";
	};
alert(CSSrules.content);
</script>

Я говорил про доступ к объектной модели. ТС хочет получать клик по псевдоэлементу. Думаю это практически невозможно осуществить.
Если только на основании стилей вычислить координаты псевдоэлемента.
Если элемент не img, то можно во время клика получить вычисленный стиль псевдоэлемента, удалить псевдоэлемент временно, а вместо него вставить временный элемент и применить к нему стили. Далее сравнить место клика с его расположением (и учесть z-index). Короче изврат полнейший ))

Не нужно просто функциональные элементы оформлять как псевдоэлементы. Это же очевидно - css для оформления, а не для функционала.