styling css code - html mailto

[sandra]

Hello! I need my CSS file to put a symbol "<" before an email, and a symbol ">" after an email. These emails in my html code are defined with "<a href="mailto:xxxxx@hotmail.com">xxxxx@hotmail.com</a>

The result I am looking for is this one: < xxxxx@hotmail.com >

I put this code in my CSS but it doesn't work properly:

a[href^="mailto"]:link:before { content: " < " ; }
a[href^="mailto"]:link:after { content: " > "; }

The result I get is: xxxxx@hotmail.com >

Please help! Thank you

 

[Funce]

I'm not able to reproduce this, the code looks fine.

Can you test this code on its own?

<style>
  a[href^="mailto"]:link:before {
    content: " < ";
  }

  a[href^="mailto"]:link:after {
    content: " > ";
  }
</style>

<a href="mailto:xxxxx@hotmail.com">xxxxx@hotmail.com</a>

 

[sandra]

Hello, thank you for your answer, I've now tried the code on it's own and it works great, the result I get is: <xxxxx@hotmail.com >.

However, I need the code in an external CSS file.

Any suggestion? 

[dsonesuk]

You just add to you current external css file, no url path is required for this css, so there wouldn't be any problem.

Edited October 15, 2019 by dsonesuk

[sandra]

Correct, but the problem is that If I put the same code in my external css file it doesn’t work properly because the result I get is: xxxxx@hotmail.com >

if I put the same code in my html file the result I get is ok: <xxxxx@hotmail.com>

[dsonesuk]

No! It shouldn't make any difference. You either have a incorrect url to your external file, have not used required rel="stylesheet" for link element to stylesheet, have possible invalid css breaking the css following it.

You did not clear history or cache before trying loading amended external css file.

Note: the style tag is only required in html file NOT! External style sheet.