Work around for pseudo-elements

HTML & CSS
1

Hi all,

I am using a CMS system where the text editor will not style my CSS pseudo-elements. This is my current CSS that works fine but i want to be able to style my links.

a.events_links {
color: #fff !important;
text-decoration: none !important;
border-bottom:1px dotted #fff !important;
}

As soon as i add the styling below it doesn’t like it.

a.events_links:active {
color: #fff !important;
text-decoration: none !important;
border-bottom:1px dotted #fff !important;
}
a.events_links:visited {
color: #fff !important;
text-decoration: none !important;
border-bottom:1px dotted #fff !important;
}
a.events_links:hover {
color: #f3e8e8 !important;
text-decoration: none !important;
border-bottom:none !important;
}

Is there a way to not use pseudo-elements yet still style my text links?

Live site: http://www.maryrosecuskelly.com/

Thank you,
Ross

2

Unfortunately that didn’t fix the issue. It seems to be when i add :hover

a.events_links:link {
color: #fff !important;
text-decoration: none !important;
border-bottom:1px dotted #fff;
}
a.events_links:active {
color: #fff !important;
text-decoration: none !important;
border-bottom:1px dotted #fff;
}
a.events_links:visited {
color: #fff !important;
text-decoration: none !important;
border-bottom:1px dotted #fff;
}
a.events_links:hover {
color: #000 !important;
text-decoration: none !important;
border-bottom:1px dotted #000;
}

Is there an alternate technique than the above for achieving a rollover?

3

ok, i’ll try that. Thank you.

4

I’ll try and explain in more detail. This is the site / page i’m referring to: http://maryrosecuskelly.com/about_maryrose_cuskelly.html

I am using http://surrealcms.com/ as my CMS text editor.

You’ll notice there’s no :hover (rollover) style on the hyperlinks on this page:
http://maryrosecuskelly.com/about_maryrose_cuskelly.html

I want to be able to stylise the hyperlinks by putting a :hover (rollover) state on them (something like below)
a.events_links :hover {
color: #000;
text-decoration: none;
border-bottom:1px dotted #000;
}
but as soon as i apply above the formatting in the text editor blows out, see here:
http://maryrosecuskelly.com/ScreenShotSitePoint.png

Surreal’s comment to this question was “I’m pretty sure that hover states won’t work in browser-based rich-text editors”

Any ideas on how to fix this?

[B]This is my current CSS for hyperlinks as seen on http://maryrosecuskelly.com/about_maryrose_cuskelly.html[/B]
a.events_links {
color: #fff !important;
text-decoration: none !important;
border-bottom:1px dotted #fff !important;
}

5

It’s important to get your rules in the right order, as conflicts can occur otherwise. A handy mnemonic is LoVe HA!

That is,
a:link
a:visited
a:hover
a:active

Try reversing the rules as shown and see if that helps:

a.events_links:link {
    color: #fff !important;
    text-decoration: none !important;
    border-bottom:1px dotted #fff;
}
a.events_links:visited {
    color: #fff !important;
    text-decoration: none !important;
    border-bottom:1px dotted #fff;
}
a.events_links:hover {
    color: #000 !important;
    text-decoration: none !important;
    border-bottom:1px dotted #000;
}
a.events_links:active {
    color: #fff !important;
    text-decoration: none !important;
    border-bottom:1px dotted #fff;
}
6

ok, will do. Thanks ralph.

7

If that’s exactly what you’ve put, the problem is the space before :hover … it shouldn’t be there.

8

Could you be more specific? What does that mean? At the moment your styles are commented out:

[COLOR="Red"]/*[/COLOR] a.events_links:active {
    color: #fff !important;
    text-decoration: none !important;
    border-bottom:1px dotted #fff !important;
}
a.events_links:visited {
    color: #fff !important;
    text-decoration: none !important;
    border-bottom:1px dotted #fff !important;
}
a.events_links:hover {
    color: #f3e8e8 !important;
    text-decoration: none !important;
    border-bottom:none !important;
} [COLOR="Red"]*/[/COLOR]

Did you do that on purpose?

As a general rule, use !important rarely or never. I’ve never used it.

9

That’s just not acceptable. Hover states are standard CSS. I don’t know what you mean by “stuffs up in my CMS editor”, but it suggests you should ditch the editor. Sounds like it’s a piece of rubbish. Can you just access the CSS file like a normal file, and bypass the editor? That’s what I do.

What CMS is it?

10

Sorry Ralph, the reason they’re commented out in my live CSS is that the CMS editor i’m using doesn’t like pseudo-elements

I’m currently using this CSS

a.events_links {
color: #fff !important;
text-decoration: none !important;
border-bottom:1px dotted #fff !important;
}

to style the text links on this page http://www.maryrosecuskelly.com/about_maryrose_cuskelly.html

Ideally, i’d like to add this to my CSS so i have a rollover state but as soon as i do the formatting stuffs up in my CMS editor. Is there another way to achieve a hover state?

a.events_links:active {
color: #fff !important;
text-decoration: none !important;
border-bottom:1px dotted #fff !important;
}
a.events_links:visited {
color: #fff !important;
text-decoration: none !important;
border-bottom:1px dotted #fff !important;
}
a.events_links:hover {
color: #f3e8e8 !important;
text-decoration: none !important;
border-bottom:none !important;
}

11

That still isn’t a very helpful description of what the problem is! If putting the pseudo-elements in makes the page break badly, how about putting up a sample page that to show us what’s going wrong?