According to the World Wide Web Consortium’s CSS 2.0 Specification, section 16.6 Whitespace, it is possible to create line breaks through the use of CSS Generated Content: ¹

Additional line breaks may be created by occurrences of “\A” in generated content (e.g., for the BR element in HTML).

In other words, if the situation requires it, create a new line in your document by applying the following property declaration to the CSS Selector content : "airplanes and trains \A newline below airplanes" or, simply content : " \A " if needed.

More information about how to use the

\\A

escape sequence in CSS can be found under Section 12, where there are extensive details about Generated content, automatic numbering, and lists

Managing White-space and Line Breaks

Lesser-known, Significant CSS Declaration Properties

the CSS Properties content and white-space are quite significant, powerful properties which have the potential to enhance CSS creativity. The truly crafty can come up with some really nice effects using the :before and :after pseudo-elements in conjuction with generated content, and perhaps even throwing in some white-space for the adventurous!

the CSS Pseudo-elements, :before and :after, conveniently built-in to CSS, offer quite amazing capabilities when their use is approached with creative skill.

These Pseudo-elements allow for the placement of Generated Content, as the name suggests, either before or after that HTML element which is indicated in the Stylesheet to receive the pseudo-element tagged or prepended relationship. For example, if the author wants every <h1> element to have the text HEADING-1 prepended to it, he would place the following into the stylesheet:

h1:before {content: “HEADING-1 “;}

which would result in that which is placed inside of the quotation marks, the string which is the value of the content property in the declaration of the :before Pseudo-element, in this case, HEADING-1 would be seen “before” every h1 element which is being styled by that stylesheet. (:after appends the string to the end of the element receiving the Pseduo-element declaration)

NOTE: Good ol’ Internet Explorer, of course, does NOT support the pseudo-element property– at all, period.

the Line Feed Control Character

The specific use that I found for :before in this particular circumstance, which is why i got excited about the discovery, is the ability to prepend the word “Citation” before every <cite> element, as shown in the code below, and as can be seen in use in many entries in this Blog in which i’ve used the <cite> element.

Note the use of the Line Feed “Control Character” within the content string of the :before Pseudo-element. The Line Feed character (Unicode “Character Encoded” format shown above) was essential to achieving the intended effect of the CSS used below for the :before Pseudo-element

cite {
font-family:arial,helvetica,sans-serif;
font-style:italic;
color:#00b;
}
cite:before {
content: “Citation: \a”;
white-space: pre;
}

¹Section 16.6: Whitespace; Cascading Style Sheets, level 2: CSS2 Specification. the World Wide Web Consortium (aka. W3C). Rev. May 12, 1998. Available at: http://www.w3.org/TR/REC-CSS2/text.html#propdef-white-space . Accessed April-08, 2007

²Paragraphs, Lines, and Phrases: HTML 4.0 Recommendation. the World Wide Web Consortium. (Rev. Dec-24 1999). Available at: http://www.w3.org/TR/html4/struct/text.html#h-9.3.2 . (Accessed [for adding citation] Mar-24, 2007)

NOTE: An observation about this very log entry. Using the newline escape sequence, \A, (which is actually being displayed using the <code> HTML element tag) is NOT affected; does NOT create a new line, UNLESS it is written as such inside of the HTML <pre> tag, in which case the backslash must itself be escaped in order to cancel the newline escape sequence. Interesting! I wonder if it is a WordPress specific thing, or is so peculiar in general.