TCM
UoC crest

Miscellaneous Responsive Elements

CSS is designed to adjust style, not content, and attempts to use it to alter content are naughty. However, one can be naughty...

The obvious way of being naughty involves the use of ::before selector. This inserts content before the content of an element. This can be used as the only content of an element. As an example:

<p id="msg"></p>

and the relevant CSS is

p#msg::before { content: "Refinement and enhancement of a website can be achieved with elegent prose."; }

@media only screen and (max-width: 800px) {
  p#msg::before { content: "Short words benefit small windows."; }
}

@media only screen and (max-width: 600px) {
  p#msg::before { content: "Keep it simple."; }
}

Such tricks are probably best left to lists and menus if used at all. Note that the content string cannot contain linebreaks, nor will the standard encoding of special characters using & work.

The following shows how to create a non-breaking space. Note that the space following the encoded non-breaking space terminates the encoding, but is not further interpretted as adding whitespace.

li#cycle::before { content: "bicycle\00a0 users";}
@media only screen and (max-width: 800px) {
  li#cycle::before { content: "cyclists"; }
}