I'm viewing the below example in Chrome and can't seem to get cursor: pointer
to work on the :after
element of li
. Is there a way to get around this?
I'm viewing the below example in Chrome and can't seem to get cursor: pointer
to work on the :after
element of li
. Is there a way to get around this?
Instead of setting the cursor: pointer
on the :after
element, set it on the entire li
and it will show up on both.
Edit:
For those of you trying to have different cursors on the li
and its :after
pseudo-element, you simply need to explicitly define the cursor
property of the content inside the li
. See this updated fiddle: http://jsfiddle.net/qKMPQ/20/
<ul>
<li>
<a href="#"></a>
</li>
</ul>
ul { list-style-type: none; }
li { cursor: pointer; }
a {
background: red;
float: left;
width: 100px;
height: 100px;
cursor: help;
display: block; }
li:after {
content: "";
background: yellow;
float: left;
width: 100px;
height: 100px;
display: block; }