Jump to content
sandra

styling css code - html mailto

Recommended Posts

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

 

Share this post


Link to post
Share on other sites

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>

 

  • Thanks 1

Share this post


Link to post
Share on other sites

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? 

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.

  • Thanks 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...