.contact::before
{
content: "moc.ynapmoc@ofni";
direction: rtl;
unicode-bidi: bidi-override;
text-decoration: underline;
color: #00f;
}
[/sourcecode]
The Markup
[sourcecode language=”html”]
<p>To contact us, send an email
to <span class="contact"></span>.</p>
[/sourcecode]
… And everything will look just right when you view it in the browser:
The drawback of this approach is that CSS3 generated content cannot be selected and copied, which is a usability issue, but this is just an idea and there are many other solutions worth trying.
One small consideration, regarding the syntax of generated content. Older browsers do not recognize the ::before or ::after double column syntax, so you may want to consider using :before / :after. Since this is just syntactical enhancement to distinguish pseudo elements (hover, active, etc) from generated content (before, after), introduced in CSS3, newer browsers understand both syntaxes, so you can use the “old” syntax without concern.
Related Posts and Links
© 2006 - 2023 Martin Ivanov