как написать: условие наведения для a: before и a: after?

<p>как написать <code>:hover</code> и <code>:visited</code> условие для <code>a:before</code>?</p><p>я пытаюсь <code>a:before:hover</code> но он не работает</p>

<p>это зависит от того, что вы на самом деле пытаетесь сделать.</p><p>если вы просто хотите применить стили к псевдоэлементу <code>:before</code>, когда элемент <code>a</code> соответствует псевдоклассу, вам нужно вместо этого написать <code>a:hover:before</code> или <code>a:visited:before</code>. обратите внимание, что псевдоэлемент идет <em>после</em> псевдокласса (и фактически, в самом конце всего селектора). обратите также внимание, что это две разные вещи; называя их обоими «псевдо-селекторами», вы запутаетесь, когда столкнетесь с такими проблемами синтаксиса, как эта.</p><p>если вы пишете css3, вы можете обозначить псевдоэлемент двойными двоеточиями, чтобы сделать это различие более понятным. следовательно, <code>a:hover::before</code> и <code>a:visited::before</code>. но если вы разрабатываете для устаревших браузеров, таких как ie8 и старше, то вы можете просто обойтись без одиночных двоеточий.</p><p>этот конкретный порядок псевдоклассов и псевдоэлементов указан в <a href="http://www.w3.org/tr/selectors/#selector-syntax">spec</a> :</p><blockquote> <p>один псевдоэлемент может быть добавлен к последней последовательности простых селекторов в селекторе.</p> <p><em>последовательность простых селекторов</em> - это цепочка простых селекторов, которые не разделены комбинатором. он всегда начинается с селектора типа или универсального селектора. никакой другой тип селектора или универсальный селектор не допускается в последовательности.</p> <p><em>простой селектор</em> является либо селектором типа, универсальным селектором, селектором атрибута, селектором класса, селектором идентификатора или псевдоклассом. </p> </blockquote><p>псевдокласс - это простой селектор. псевдоэлемент, однако, не является таковым, хотя он напоминает простой селектор.</p><p>однако для псевдоклассов действий пользователя, таких как <code>:hover</code><sup>1</sup>, если вам нужен этот эффект для применения <em>только</em>, когда пользователь взаимодействует с самим псевдоэлементом, но не с элементом <code>a</code>, то это невозможно, за исключением неясного обходного решения, зависящего от макета. как следует из текста, стандартные псевдоэлементы css в настоящее время не могут иметь псевдоклассы. в этом случае вам нужно применить <code>:hover</code> к фактическому дочернему элементу вместо псевдоэлемента.</p><hr><p><sup>1</sup> <sub>конечно, это не относится к ссылочным псевдоклассам, таким как <code>:visited</code>, как в вопросе, поскольку псевдоэлементы не являются ссылками.</sub></p>

<p>напишите <code>a:hover::before</code> вместо <code>a::before:hover</code>: <a href="http://jsfiddle.net/sandeep/pjspq/1/">пример</a> .</p>

<p>чтобы изменить текст ссылки меню при наведении курсора. (текст на другом языке при наведении) .\_\_ </p><p> <a href="http://jsfiddle.net/nagendra\_rao/ysgkl/2/">пример jsfiddle</a> </p><p>html:</p><pre><code><a align="center" href="#"><span>kannada</span></a> </code></pre><p>css:</p><pre><code>span { font-size:12px; } a { color:green; } a:hover span { display:none; } a:hover:before { color:red; font-size:24px; content:"ಕನ್ನಡ"; } </code></pre>

<p>попробуйте использовать <code>.card-listing:hover::after</code> <code>hover</code> и <code>after</code>, используя <code>::</code>, это сработает</p>

<p>boltclock ответ правильный. единственное, что я хочу добавить, это то, что если вы хотите выбрать только псевдоэлемент, поместите его в span. </p><p>например: </p><pre><code><li><span data-icon='u'></span> list element </li> </code></pre><p>вместо:</p><pre><code><li> data-icon='u' list element</li> </code></pre><p>таким образом, вы можете просто сказать,</p><pre><code>ul [data-icon]:hover::before {color: #f7f7f7;} </code></pre><p>который будет выделять только псевдоэлемент, а не весь элемент li</p>