Links in Pseudo Element?

[PeretzM]

How can i put an link (for example, for a close button) in a pseudo element?

Thanks.

[PeretzM]

OK, let me try again.

I am setting up a UI for an app I’m working on. One of the elements i need are notifications, here is how i was hoping to set them up:

This is what notifications will look like.

with the following css:

.notifications {

display:block;

background: #44c8f5;

font-size:14px;

font-weight:bold;

display:block;

height:35px;

width:98%;

line-height:35px;

text-indent:10px;

color:#fff;

margin:5px 0 15px;

border:4px solid #fff;

-moz-box-shadow: 2px 2px 1px #d9d9d9;

-webkit-box-shadow: 2px 2px 1px #d9d9d9;

box-shadow: 2px 2px 1px #d9d9d9;

}



.notifications:after {

content:"x";

display:block;

background: #fff;

font-size:12px;

font-weight:bold;

display:block;

float:right;

width:25px;

height:20px;

line-height:20px;

color:#44c8f5;

margin:-12px -12px;

border:2px solid #356c85;

-moz-box-shadow: 1px 1px 1px #323232;

-webkit-box-shadow: 1px 1px 1px #323232;

box-shadow: 1px 1px 1px #323232;

}

My question is: Is there a way i can make the “x” that was created from the :after class, into a button, which will enable me to “close” the notifications?

[Sirlon]

No but you can bind a onclick event on the notification.

[Johnnyb]

If you don’t mind using jquery you could do something like this:

$('.notifications').after("x");



$('.close').click(function() {

$('.notifications').hide();

});

Haven’t tested it but it should work.

[PeretzM]

I just decided to add a class to my link, and put it in the html:

This is what notifications will look like. x

[Author]

Posts