Взаимодействовать с псевдоэлементами на странице не так просто, как с обычными HTML-элементами. До них невозможно «добраться» при помощи jQuery, а при необходимости изменить их содержимое приходиться делать различные трюки. Недавно мне понадобилось изменить фон псевдоэлемента :after. Сейчас я поделюсь с вами информацией о том, как это можно сделать.
У нас есть страничка с одним HTML-элементом (для наглядности) - заголовком h1. Внутри него находится ссылка.
HTML
<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
h1{
color:#f2b940;
font-size:1.5em;
font-family: Verdana, sans-serif;
margin:10px 0 0 10px;
cursor: pointer;
}
.test{
border-bottom: 1px dotted #323694;
color: #323694;
cursor: pointer;
font-weight: normal;
position: relative;
text-decoration: none;
}
.test:after{
background: url("arrow-blue.png") no-repeat;
background-position: 100% -10px;
content: "";
display: block;
height: 5px;
position: absolute;
right: -17px;
top: 50%;
width: 10px;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet, consectetur <a href="#" class="test">adipiscing elit</a></h1>
</body>
</html>
При клике на ссылку под этим HTML-элемент должен появляться всплывающий блок с содержимым. Справа от ссылки находится маленькое изображение стрелочки, указывающей вниз. После клика и появления всплывающего блока, эта стрелочка должна менять свое направление вверх.
Изображение стрелочки является фоном псевдоэлемента :after ссылки. Как же сделать так, чтобы все работало, как я описал?
Если добавить следующий код, то это НЕ СРАБОТАЕТ.
JavaScript
$('a.test:after').css('background', 'url(arrow.png) no-repeat 0 -50px');
Дело в том, что пседоэлементы находятся вне DOM-дерева и к ним нельзя обратиться как к простым HTML-элементам, например, заголовками или абзацам. На самом деле решение есть и оно несложное. Нужно просто создать еще один CSS-класс и добавить в него правила, описывающие внешний вид измененного псевдоэлемента. В данном случае они будут следующими.
CSS
.test, .test2{
border-bottom: 1px dotted #323694;
color: #323694;
cursor: pointer;
font-weight: normal;
position: relative;
text-decoration: none;
}
.test:after, .test2:after{
background: url("arrow-blue.png") no-repeat;
background-position: 100% -10px;
content: "";
display: block;
height: 5px;
position: absolute;
right: -17px;
top: 50%;
width: 10px;
}
.test2:after{background-position: 100% 0px;}
Как вы видите, я просто добавил еще один CSS-класс к существующим правилам и создал еще одно правило для изменения позиции фона, чтобы наша стрелочка указывала вверх.
Последний штрих: пара строчек jQuery и задача рещена.
HTML
<script>
$(function(){
$('a.test').click(function(event){
$(this).removeClass('test').addClass('test2');
event.preventDefault();
});
});
</script>
Вот таким образом можно изменять внешний вид псевдоэлементов на веб-страницах.
Демо-страничка с примером из заметки.
