Pseudo Elements - 1 - The First-* Psuedo Elements - INCOMPLETE

If you have any comments to make regarding this test, e-mail ian@hixie.ch.

Prerequisites
Browsers that are subjected to this test should support CSS1. Some CSS2 properties are tested but are not essential.

:first-letter

5.12.2 - Applicable Properties

These are the properties that apply to :first-letter pseudo-elements:

  1. font properties
  2. color properties
  3. background properties
  4. text-decoration
  5. vertical-align (only if float is none)
  6. text-transform
  7. line-height
  8. margin properties
  9. padding properties
  10. border properties
  11. float
  12. text-shadow
  13. clear

Lets test each one in turn, and then some other ones for good measure.

Below, each line should have the same formatting throughout. That is, the first letter should not be different than the other letters.

This line should be sans-serif.

This line should be bigger.

This line should be italic.

this line should be smaller and all caps.

This line should be bold.

This line should be bright green.

This line should be bright green on dark green.

This line should be backed by diamonds.

This line should be underlined and overlined.

The lines below should be self explanatory.

This paragraph's first line should be left indented. Continuations lines should not be. Continuations lines should not be. Continuations lines should not be.

This paragraph's first line should be left indented. Continuations lines should not be. Continuations lines should not be. Continuations lines should not be.

This paragraph's first line should be left indented. Continuations lines should not be. Continuations lines should not be. Continuations lines should not be.

1There should be a gap between the "1" and the "There".

2There should be a gap between the "2" and the "There".

3There should be a gap between the "3" and the "There", and the first line should be indented (but only the first line, continuation lines should not be indented). This is a hopefully continuation line. This is a hopefully continuation line. This is a hopefully continuation line. This is a hopefully continuation line.

This paragraph should not have any special features and should not be spaced apart from the previous or following lines.

This paragraph should not have any special features and should not be spaced apart from the previous or following lines.

The first colour of this paragraph should have a background which stretches down into the next few lines.

The first letter of this paragraph should be bigger and should have a border, which, clockwise from the top, should have been dotted, dashed, double and solid. The thickness should have been thin on the top, medium on the bottom, and thick on the sides, and the colours should have been (clockwise from the top again) maroon, green, navy, and purple.

This paragraph should have no funky alignment problems on the first letter.

This [tall text] paragraph should have no funky alignment problems on the first letter.

5.12.2 - Abut

Note that the :first-letter pseudo-element tags abut the content (i.e., the initial character), while the :first-line pseudo-element start tag is inserted right after the start tag of the element to which it is attached.

5.12.2 - Punctuation

Punctuation (i.e, characters defined in Unicode in the "open" (Ps), "close" (Pe), and "other" (Po) punctuation classes), that precedes the first letter should be included (According to unicode, this includes the Pi and Pf classes). The tests below include all 209 such characters that are listed in Unicode 2.1.9.

_This is an example of what a problem looks like in the following tests.

!EXCLAMATION MARK (U+0021;Po)

"QUOTATION MARK (U+0022;Po)

#NUMBER SIGN (U+0023;Po)

%PERCENT SIGN (U+0025;Po)

&AMPERSAND (U+0026;Po)

'APOSTROPHE (U+0027;Po)

(LEFT PARENTHESIS (U+0028;Ps)

)RIGHT PARENTHESIS (U+0029;Pe)

*ASTERISK (U+002A;Po)

,COMMA (U+002C;Po)

.FULL STOP (U+002E;Po)

/SOLIDUS (U+002F;Po)

:COLON (U+003A;Po)

;SEMICOLON (U+003B;Po)

?QUESTION MARK (U+003F;Po)

@COMMERCIAL AT (U+0040;Po)

[LEFT SQUARE BRACKET (U+005B;Ps)

\REVERSE SOLIDUS (U+005C;Po)

]RIGHT SQUARE BRACKET (U+005D;Pe)

{LEFT CURLY BRACKET (U+007B;Ps)

}RIGHT CURLY BRACKET (U+007D;Pe)

¡INVERTED EXCLAMATION MARK (U+00A1;Po)

«LEFT-POINTING DOUBLE ANGLE QUOTATION MARK (U+00AB;Pi)

·MIDDLE DOT (U+00B7;Po)

»RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK (U+00BB;Pf)

¿INVERTED QUESTION MARK (U+00BF;Po)

;GREEK QUESTION MARK (U+037E;Po)

·GREEK ANO TELEIA (U+0387;Po)

՚ARMENIAN APOSTROPHE (U+055A;Po)

՛ARMENIAN EMPHASIS MARK (U+055B;Po)

՜ARMENIAN EXCLAMATION MARK (U+055C;Po)

՝ARMENIAN COMMA (U+055D;Po)

՞ARMENIAN QUESTION MARK (U+055E;Po)

՟ARMENIAN ABBREVIATION MARK (U+055F;Po)

։ARMENIAN FULL STOP (U+0589;Po)

־HEBREW PUNCTUATION MAQAF (U+05BE;Po)

׀HEBREW PUNCTUATION PASEQ (U+05C0;Po)

׃HEBREW PUNCTUATION SOF PASUQ (U+05C3;Po)

׳HEBREW PUNCTUATION GERESH (U+05F3;Po)

״HEBREW PUNCTUATION GERSHAYIM (U+05F4;Po)

،ARABIC COMMA (U+060C;Po)

؛ARABIC SEMICOLON (U+061B;Po)

؟ARABIC QUESTION MARK (U+061F;Po)

٪ARABIC PERCENT SIGN (U+066A;Po)

٫ARABIC DECIMAL SEPARATOR (U+066B;Po)

٬ARABIC THOUSANDS SEPARATOR (U+066C;Po)

٭ARABIC FIVE POINTED STAR (U+066D;Po)

۔ARABIC FULL STOP (U+06D4;Po)

।DEVANAGARI DANDA (U+0964;Po)

॥DEVANAGARI DOUBLE DANDA (U+0965;Po)

॰DEVANAGARI ABBREVIATION SIGN (U+0970;Po)

๚THAI CHARACTER ANGKHANKHU (U+0E5A;Po)

๛THAI CHARACTER KHOMUT (U+0E5B;Po)

༄TIBETAN MARK INITIAL YIG MGO MDUN MA (U+0F04;Po)

༅TIBETAN MARK CLOSING YIG MGO SGAB MA (U+0F05;Po)

༆TIBETAN MARK CARET YIG MGO PHUR SHAD MA (U+0F06;Po)

༇TIBETAN MARK YIG MGO TSHEG SHAD MA (U+0F07;Po)

༈TIBETAN MARK SBRUL SHAD (U+0F08;Po)

༉TIBETAN MARK BSKUR YIG MGO (U+0F09;Po)

༊TIBETAN MARK BKA- SHOG YIG MGO (U+0F0A;Po)

་TIBETAN MARK INTERSYLLABIC TSHEG (U+0F0B;Po)

༌TIBETAN MARK DELIMITER TSHEG BSTAR (U+0F0C;Po)

།TIBETAN MARK SHAD (U+0F0D;Po)

༎TIBETAN MARK NYIS SHAD (U+0F0E;Po)

༏TIBETAN MARK TSHEG SHAD (U+0F0F;Po)

༐TIBETAN MARK NYIS TSHEG SHAD (U+0F10;Po)

༑TIBETAN MARK RIN CHEN SPUNGS SHAD (U+0F11;Po)

༒TIBETAN MARK RGYA GRAM SHAD (U+0F12;Po)

༺TIBETAN MARK GUG RTAGS GYON (U+0F3A;Ps)

༻TIBETAN MARK GUG RTAGS GYAS (U+0F3B;Pe)

༼TIBETAN MARK ANG KHANG GYON (U+0F3C;Ps)

༽TIBETAN MARK ANG KHANG GYAS (U+0F3D;Pe)

྅TIBETAN MARK PALUTA (U+0F85;Po)

჻GEORGIAN PARAGRAPH SEPARATOR (U+10FB;Po)

‖DOUBLE VERTICAL LINE (U+2016;Po)

‗DOUBLE LOW LINE (U+2017;Po)

‘LEFT SINGLE QUOTATION MARK (U+2018;Pi)

’RIGHT SINGLE QUOTATION MARK (U+2019;Pf)

‚SINGLE LOW-9 QUOTATION MARK (U+201A;Ps)

‛SINGLE HIGH-REVERSED-9 QUOTATION MARK (U+201B;Pi)

“LEFT DOUBLE QUOTATION MARK (U+201C;Pi)

”RIGHT DOUBLE QUOTATION MARK (U+201D;Pf)

„DOUBLE LOW-9 QUOTATION MARK (U+201E;Ps)

‟DOUBLE HIGH-REVERSED-9 QUOTATION MARK (U+201F;Pi)

†DAGGER (U+2020;Po)

‡DOUBLE DAGGER (U+2021;Po)

•BULLET (U+2022;Po)

‣TRIANGULAR BULLET (U+2023;Po)

․ONE DOT LEADER (U+2024;Po)

‥TWO DOT LEADER (U+2025;Po)

…HORIZONTAL ELLIPSIS (U+2026;Po)

‧HYPHENATION POINT (U+2027;Po)

‰PER MILLE SIGN (U+2030;Po)

‱PER TEN THOUSAND SIGN (U+2031;Po)

′PRIME (U+2032;Po)

″DOUBLE PRIME (U+2033;Po)

‴TRIPLE PRIME (U+2034;Po)

‵REVERSED PRIME (U+2035;Po)

‶REVERSED DOUBLE PRIME (U+2036;Po)

‷REVERSED TRIPLE PRIME (U+2037;Po)

‸CARET (U+2038;Po)

‹SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039;Pi)

›SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A;Pf)

※REFERENCE MARK (U+203B;Po)

‼DOUBLE EXCLAMATION MARK (U+203C;Po)

‽INTERROBANG (U+203D;Po)

‾OVERLINE (U+203E;Po)

⁁CARET INSERTION POINT (U+2041;Po)

⁂ASTERISM (U+2042;Po)

⁃HYPHEN BULLET (U+2043;Po)

⁅LEFT SQUARE BRACKET WITH QUILL (U+2045;Ps)

⁆RIGHT SQUARE BRACKET WITH QUILL (U+2046;Pe)

⁽SUPERSCRIPT LEFT PARENTHESIS (U+207D;Ps)

⁾SUPERSCRIPT RIGHT PARENTHESIS (U+207E;Pe)

₍SUBSCRIPT LEFT PARENTHESIS (U+208D;Ps)

₎SUBSCRIPT RIGHT PARENTHESIS (U+208E;Pe)

〈LEFT-POINTING ANGLE BRACKET (U+2329;Ps)

〉RIGHT-POINTING ANGLE BRACKET (U+232A;Pe)

、IDEOGRAPHIC COMMA (U+3001;Po)

。IDEOGRAPHIC FULL STOP (U+3002;Po)

〃DITTO MARK (U+3003;Po)

〈LEFT ANGLE BRACKET (U+3008;Ps)

〉RIGHT ANGLE BRACKET (U+3009;Pe)

《LEFT DOUBLE ANGLE BRACKET (U+300A;Ps)

》RIGHT DOUBLE ANGLE BRACKET (U+300B;Pe)

「LEFT CORNER BRACKET (U+300C;Ps)

」RIGHT CORNER BRACKET (U+300D;Pe)

『LEFT WHITE CORNER BRACKET (U+300E;Ps)

』RIGHT WHITE CORNER BRACKET (U+300F;Pe)

【LEFT BLACK LENTICULAR BRACKET (U+3010;Ps)

】RIGHT BLACK LENTICULAR BRACKET (U+3011;Pe)

〔LEFT TORTOISE SHELL BRACKET (U+3014;Ps)

〕RIGHT TORTOISE SHELL BRACKET (U+3015;Pe)

〖LEFT WHITE LENTICULAR BRACKET (U+3016;Ps)

〗RIGHT WHITE LENTICULAR BRACKET (U+3017;Pe)

〘LEFT WHITE TORTOISE SHELL BRACKET (U+3018;Ps)

〙RIGHT WHITE TORTOISE SHELL BRACKET (U+3019;Pe)

〚LEFT WHITE SQUARE BRACKET (U+301A;Ps)

〛RIGHT WHITE SQUARE BRACKET (U+301B;Pe)

〝REVERSED DOUBLE PRIME QUOTATION MARK (U+301D;Ps)

〞DOUBLE PRIME QUOTATION MARK (U+301E;Pe)

〟LOW DOUBLE PRIME QUOTATION MARK (U+301F;Pe)

﴾ORNATE LEFT PARENTHESIS (U+FD3E;Ps)

﴿ORNATE RIGHT PARENTHESIS (U+FD3F;Pe)

︰PRESENTATION FORM FOR VERTICAL TWO DOT LEADER (U+FE30;Po)

︵PRESENTATION FORM FOR VERTICAL LEFT PARENTHESIS (U+FE35;Ps)

︶PRESENTATION FORM FOR VERTICAL RIGHT PARENTHESIS (U+FE36;Pe)

︷PRESENTATION FORM FOR VERTICAL LEFT CURLY BRACKET (U+FE37;Ps)

︸PRESENTATION FORM FOR VERTICAL RIGHT CURLY BRACKET (U+FE38;Pe)

︹PRESENTATION FORM FOR VERTICAL LEFT TORTOISE SHELL BRACKET (U+FE39;Ps)

︺PRESENTATION FORM FOR VERTICAL RIGHT TORTOISE SHELL BRACKET (U+FE3A;Pe)

︻PRESENTATION FORM FOR VERTICAL LEFT BLACK LENTICULAR BRACKET (U+FE3B;Ps)

︼PRESENTATION FORM FOR VERTICAL RIGHT BLACK LENTICULAR BRACKET (U+FE3C;Pe)

︽PRESENTATION FORM FOR VERTICAL LEFT DOUBLE ANGLE BRACKET (U+FE3D;Ps)

︾PRESENTATION FORM FOR VERTICAL RIGHT DOUBLE ANGLE BRACKET (U+FE3E;Pe)

︿PRESENTATION FORM FOR VERTICAL LEFT ANGLE BRACKET (U+FE3F;Ps)

﹀PRESENTATION FORM FOR VERTICAL RIGHT ANGLE BRACKET (U+FE40;Pe)

﹁PRESENTATION FORM FOR VERTICAL LEFT CORNER BRACKET (U+FE41;Ps)

﹂PRESENTATION FORM FOR VERTICAL RIGHT CORNER BRACKET (U+FE42;Pe)

﹃PRESENTATION FORM FOR VERTICAL LEFT WHITE CORNER BRACKET (U+FE43;Ps)

﹄PRESENTATION FORM FOR VERTICAL RIGHT WHITE CORNER BRACKET (U+FE44;Pe)

﹉DASHED OVERLINE (U+FE49;Po)

﹊CENTRELINE OVERLINE (U+FE4A;Po)

﹋WAVY OVERLINE (U+FE4B;Po)

﹌DOUBLE WAVY OVERLINE (U+FE4C;Po)

﹐SMALL COMMA (U+FE50;Po)

﹑SMALL IDEOGRAPHIC COMMA (U+FE51;Po)

﹒SMALL FULL STOP (U+FE52;Po)

﹔SMALL SEMICOLON (U+FE54;Po)

﹕SMALL COLON (U+FE55;Po)

﹖SMALL QUESTION MARK (U+FE56;Po)

﹗SMALL EXCLAMATION MARK (U+FE57;Po)

﹙SMALL LEFT PARENTHESIS (U+FE59;Ps)

﹚SMALL RIGHT PARENTHESIS (U+FE5A;Pe)

﹛SMALL LEFT CURLY BRACKET (U+FE5B;Ps)

﹜SMALL RIGHT CURLY BRACKET (U+FE5C;Pe)

﹝SMALL LEFT TORTOISE SHELL BRACKET (U+FE5D;Ps)

﹞SMALL RIGHT TORTOISE SHELL BRACKET (U+FE5E;Pe)

﹟SMALL NUMBER SIGN (U+FE5F;Po)

﹠SMALL AMPERSAND (U+FE60;Po)

﹡SMALL ASTERISK (U+FE61;Po)

﹨SMALL REVERSE SOLIDUS (U+FE68;Po)

﹪SMALL PERCENT SIGN (U+FE6A;Po)

﹫SMALL COMMERCIAL AT (U+FE6B;Po)

！FULLWIDTH EXCLAMATION MARK (U+FF01;Po)

＂FULLWIDTH QUOTATION MARK (U+FF02;Po)

＃FULLWIDTH NUMBER SIGN (U+FF03;Po)

％FULLWIDTH PERCENT SIGN (U+FF05;Po)

＆FULLWIDTH AMPERSAND (U+FF06;Po)

＇FULLWIDTH APOSTROPHE (U+FF07;Po)

（FULLWIDTH LEFT PARENTHESIS (U+FF08;Ps)

）FULLWIDTH RIGHT PARENTHESIS (U+FF09;Pe)

＊FULLWIDTH ASTERISK (U+FF0A;Po)

，FULLWIDTH COMMA (U+FF0C;Po)

．FULLWIDTH FULL STOP (U+FF0E;Po)

／FULLWIDTH SOLIDUS (U+FF0F;Po)

：FULLWIDTH COLON (U+FF1A;Po)

；FULLWIDTH SEMICOLON (U+FF1B;Po)

？FULLWIDTH QUESTION MARK (U+FF1F;Po)

＠FULLWIDTH COMMERCIAL AT (U+FF20;Po)

［FULLWIDTH LEFT SQUARE BRACKET (U+FF3B;Ps)

＼FULLWIDTH REVERSE SOLIDUS (U+FF3C;Po)

］FULLWIDTH RIGHT SQUARE BRACKET (U+FF3D;Pe)

｛FULLWIDTH LEFT CURLY BRACKET (U+FF5B;Ps)

｝FULLWIDTH RIGHT CURLY BRACKET (U+FF5D;Pe)

｡HALFWIDTH IDEOGRAPHIC FULL STOP (U+FF61;Po)

｢HALFWIDTH LEFT CORNER BRACKET (U+FF62;Ps)

｣HALFWIDTH RIGHT CORNER BRACKET (U+FF63;Pe)

､HALFWIDTH IDEOGRAPHIC COMMA (U+FF64;Po)

And now some others that should not exhibit that behaviour (if anything is huge, there is an error):

"This is an example of what a problem looks like in the following tests."

-HYPHEN-MINUS (U+002D;Pd)

_LOW LINE (U+005F;Pc)

­SOFT HYPHEN (U+00AD;Pd)

‐HYPHEN (U+2010;Pd)

‑NON-BREAKING HYPHEN (U+2011;Pd)

‒FIGURE DASH (U+2012;Pd)

–EN DASH (U+2013;Pd)

—EM DASH (U+2014;Pd)

―HORIZONTAL BAR (U+2015;Pd)

‿UNDERTIE (U+203F;Pc)

⁀CHARACTER TIE (U+2040;Pc)

〜WAVE DASH (U+301C;Pd)

〰WAVY DASH (U+3030;Pd)

・KATAKANA MIDDLE DOT (U+30FB;Pc)

︱PRESENTATION FORM FOR VERTICAL EM DASH (U+FE31;Pd)

︲PRESENTATION FORM FOR VERTICAL EN DASH (U+FE32;Pd)

︳PRESENTATION FORM FOR VERTICAL LOW LINE (U+FE33;Pc)

︴PRESENTATION FORM FOR VERTICAL WAVY LOW LINE (U+FE34;Pc)

﹍DASHED LOW LINE (U+FE4D;Pc)

﹎CENTRELINE LOW LINE (U+FE4E;Pc)

﹏WAVY LOW LINE (U+FE4F;Pc)

﹘SMALL EM DASH (U+FE58;Pd)

﹣SMALL HYPHEN-MINUS (U+FE63;Pd)

－FULLWIDTH HYPHEN-MINUS (U+FF0D;Pd)

＿FULLWIDTH LOW LINE (U+FF3F;Pc)

･HALFWIDTH KATAKANA MIDDLE DOT (U+FF65;Pc)

5.12.3 - Combination with :before and :after

When the :first-letter and :first-line pseudo-elements are combined with :before and :after, they apply to the first letter or line of the element including the inserted text.

Combination with floating parent

Up to the Evil Tests Page.

Last updated in May 1999.