This solution (or workaround, if you like) came out of a need to write text visible only for modern browsers.
I have a case, where such text would point out a formatting feature containing further information in
<ACRONYM> tags, only that severely out-of-date and text-only browsers do not support the
dotted underline and border properties, so help text for these browsers was not necessary. I wouldn't use JavaScript (which uses
document.write) and there are websites like WordPress (
IINM) that only allow editing CSS files and may forbid JavaScript.
The CSS 2.1 specification has it that it's possible to create generated content before or after an element, using
:before and
:after pseudo-elements, respectively.
The
best explanation about how it works is in the CSS2 technical recommendation at
W3.
The difficult part is in how to format text within the
content: property.
Well, there are two ways that work and a third way that is a workaround. The two ways are well-documented in the W3 technical recommendation (see above link), where it's possible to specify attributes with
first-letter and
first-line (for longer texts within
content) pseudo-elements.
The Third Way
Specifying formatting for bits of text within the
content: property is impossible, so the solution is to create one or more rulesets of
:before or
:after pseudo-elements with similar declaration blocks, wherein some rulesets' declarations are different.
In HTML, write the following snippets of code:
<SPAN CLASS=text></SPAN><SPAN CLASS=dotted></SPAN><SPAN CLASS=bits></SPAN> and so on...
In CSS, example code shows the following:
.text:after {content:'^ Mouse over text with\ ';}
.dotted:after {content:'dotted underlines'; border-bottom:dotted 1px; border-bottom-color:inherit;}
.bits:after {content:'\ for more infobits'}
/* ^ Use the backslash \ to escape special characters, including a space (or it won't be shown). */
The result:
Browsers, which
don't support CSS
:before and
:after pseudo-elements, won't see this. ^
The result is used here in a
previous blog post. The example text snipped was put in place of a paragraph break, but since the Lynx browser wouldn't create a paragraph break inside a list with
<P></P> or
<BR><BR>, or instead there was more space added in modern browsers with variants that included a non-breaking space
, then the best solution was to wrap above HTML code within
<DIV> tags and add a non-breaking space —
<DIV> <SPAN CLASS=text></SPAN></DIV>
Characteristics
The most interesting and equally obscure characteristic with CSS generated content is, that generated text cannot be directly copied — even when selecting a normal area that wraps around generated content, then only the wraparound selection is pasted.
While this may be useful to wonks interested about protecting original content, then it's still a chore to implement, and advanced users would still be adept at copying text from near the source (unless obfuscated). The technique is similar to mechanisms that disable direct text copying in advanced document files, like PDF, but with the difference in sophistication: PDF files have encryption and other features.
The (dubious) advantage is, that direct copying is disabled; and the disadvantage is, that a number of browsers don't support these pseudo-classes. And not just older (Netscape 4) and niche browsers (Lynx, Links, Elinks), but even
Internet Explorer 7 doesn't.
16.12.2015. Update:
I recently wanted to add newlines to generated content, but after several turns of trial-and-error with
\A in
content:, I turned to a search engine and found about the best blog post by Chee Aun that
describes the issue in detail.
The solution with Firefox is to specify
white-space:pre-wrap — This preserves both wrapping and newlines.
