content:'x' отображает HTML-сущности так, как они записаны в CSS, не заменяет их на специальные символы. Например, напишем в CSS content:'→', получим в браузере «→» вместо «→». Поэтому писать спецальные символы в content нужно 4-значными UTF-кодами (UTF-16 hex), экранированными обратным слэшем."
created_at: 2012-03-11
kind: article
publish: true
tags: [css]
starred: true
badge: 'справочник'
badgetype: 'badge-directory'
disqusid: htmlentities
styles: ["custom.css"]
og_image: '/i/og/og-paulradzkov-2012-html-entities_and_utf_codes.png'
---
Генерируемое содержимое псевдоклассов :before и :after очень удобно использовать для создания иконок, буллитов, кавычек и в прочих декоративных целях.
Но свойство content: '\203A'; отображает HTML-сущности так, как они записаны в CSS, не заменяет их на специальные символы. Например, напишем в CSS content: '→';, получим в браузере «→» вместо «→». Поэтому писать спецальные символы в content нужно 4-значными UTF-кодами (UTF-16 hex), экранированными обратным слэшем.
Пример CSS-кода:
p.readmore a:after {
content: '\203A'; /* выведет › */
position: absolute;
right: 0.8em;
top: 4px;
display: block;
}
| Символ | HTML-entity | UTF-код | Название |
|---|---|---|---|
| Кавычки | |||
| ‹ | ‹ |
\2039 |
single left-pointing angle quotation mark |
| › | › |
\203A |
single right-pointing angle quotation mark |
| « | « |
\00AB |
left-pointing double angle quotation mark = left pointing guillemet |
| » | » |
\00BB |
right-pointing double angle quotation mark = right pointing guillemet |
| ‚ | ‚ |
\201A |
single bottom quotation mark |
| ‘ | ‘ |
\2018 |
left single quotation mark |
| ’ | ’ |
\2019 |
right single quotation mark |
| „ | „ |
\201E |
bottom double quotation mark |
| “ | “ |
\201C |
left double quotation mark |
| ” | ” |
\201D |
right double quotation mark |
| " | " |
\0022 |
APL quote (прямая программистская кавычка с клавиатуры) |
| ′ | ′ |
\2032 |
prime = minutes = feet |
| ″ | ″ |
\2033 |
double prime = seconds = inches |
| Тире и другие знаки препинания | |||
| — | — |
\2014 |
em dash |
| – | – |
\2013 |
en dash |
| … | … |
\2026 |
horizontal ellipsis = three dot leader |
| ¡ | ¡ |
\00A1 |
inverted exclamation mark |
| ¿ | ¿ |
\00BF |
inverted question mark = turned question mark |
| Стрелки | |||
| ← | ← |
\2190 |
leftwards arrow |
| → | → |
\2192 |
rightwards arrow |
| ↑ | ↑ |
\2191 |
upwards arrow |
| ↓ | ↓ |
\2193 |
downwards arrow |
| ⇐ | ⇐ |
\21D0 |
leftwards double arrow |
| ⇒ | ⇒ |
\21D2 |
rightwards double arrow |
| ⇑ | ⇑ |
\21D1 |
upwards double arrow |
| ⇓ | ⇓ |
\21D3 |
downwards double arrow |
| ↔ | ↔ |
\2194 |
left right arrow |
| ⇔ | ⇔ |
\21D4 |
left right double arrow |
| ↵ | ↵ |
\21B5 |
downwards arrow with corner leftwards = carriage return |
| Буллиты | |||
| • | • |
\2022 |
bullet |
| · | · |
\00B7 |
middle dot |
| ⋅ | ⋅ |
\22C5 |
dot operator |
| ∗ | ∗ |
\2217 |
low asterisk |
| ♣ | ♣ |
\2663 |
black club suit |
| ♦ | ♦ |
\2666 |
black diamond suit |
| ♥ | ♥ |
\2665 |
black heart suit |
| ♠ | ♠ |
\2660 |
black spade suit |
| ◊ | ◊ |
\25CA |
lozenge |
| Пробельные символы | |||
| m m | |
\0020 |
обыкновенный пробел |
| m m | |
\00A0 |
no-break space = non-breaking space |
| n n |   |
\2002 |
en space |
| m m |   |
\2003 |
em space |
| _ _ |   |
\2009 |
thin space |
| __ | ‍ |
\200D |
zero width joiner |
| __ | ‌ |
\200C |
zero width non-joiner |
| Математические символы | |||
| × | × |
\00D7 |
multiplication sign |
| ÷ | ÷ |
\00F7 |
division sign |
| ⁄ | ⁄ |
\2044 |
fraction slash |
| − | − |
\2212 |
minus sign |
| ± | ± |
\00B1 |
plus-minus sign = plus-or-minus sign |
| < | < |
\003C |
less-than sign |
| > | > |
\003E |
greater-than sign |
| ≤ | ≤ |
\2264 |
less-than or equal to |
| ≥ | ≥ |
\2265 |
greater-than or equal to |
| ≈ | ≈ |
\2248 |
almost equal to = asymptotic to |
| ≅ | ≅ |
\2245 |
approximately equal to |
| ≡ | ≡ |
\2261 |
identical to |
| ≠ | ≠ |
\2260 |
not equal to |
| ° | ° |
\00B0 |
degree sign |
| ½ | ½ |
\00BD |
vulgar fraction one half = fraction one half |
| ¼ | ¼ |
\00BC |
vulgar fraction one quarter = fraction one quarter |
| ¾ | ¾ |
\00BE |
vulgar fraction three quarters = fraction three quarters |
| ¹ | ¹ |
\00B9 |
superscript one = superscript digit one |
| ² | ² |
\00B2 |
superscript two = superscript digit two = squared |
| ³ | ³ |
\00B3 |
superscript three = superscript digit three = cubed |
| & | & |
\0026 |
ampersand |
| ∼ | ∼ |
\223C |
tilde operator = varies with = similar to |
| ∧ | ∧ |
\2227 |
logical and = wedge |
| ∨ | ∨ |
\2228 |
logical or = vee |
| ¬ | ¬ |
\00AC |
not sign |
| ℵ | ℵ |
\2135 |
alef symbol = first transfinite cardinal |
| ∠ | ∠ |
\2220 |
angle |
| ∩ | ∩ |
\2229 |
intersection = cap |
| ∪ | ∪ |
\222A |
union = cup |
| ⊂ | ⊂ |
\2282 |
subset of |
| ⊆ | ⊆ |
\2286 |
subset of or equal to |
| ⊃ | ⊃ |
\2283 |
superset of |
| ⊇ | ⊇ |
\2287 |
superset of or equal to |
| ∋ | ∋ |
\220B |
contains as member |
| ∈ | ∈ |
\2208 |
element of |
| ∉ | ∉ |
\2209 |
not an element of |
| ⊄ | ⊄ |
\2284 |
not a subset of |
| ∃ | ∃ |
\2203 |
there exists |
| ƒ | ƒ |
\0192 |
latin small f with hook = function = florin |
| ∀ | ∀ |
\2200 |
for all |
| ∞ | ∞ |
\221E |
infinity |
| ∫ | ∫ |
\222B |
integral |
| ∗ | ∗ |
\2217 |
asterisk operator |
| µ | µ |
\00B5 |
micro sign |
| ∇ | ∇ |
\2207 |
nabla = backward difference |
| ∂ | ∂ |
\2202 |
partial differential |
| ⊥ | ⊥ |
\22A5 |
up tack = orthogonal to = perpendicular |
| ∏ | ∏ |
\220F |
n-ary product = product sign |
| ∝ | ∝ |
\221D |
proportional to |
| √ | √ |
\221A |
square root = radical sign |
| ⋅ | ⋅ |
\22C5 |
dot operator |
| ∑ | ∑ |
\2211 |
n-ary sumation |
| ∅ | ∅ |
\2205 |
empty set = null set = diameter |
| ⊕ | ⊕ |
\2295 |
circled plus = direct sum |
| ⊗ | ⊗ |
\2297 |
circled times = vector product |
| ∴ | ∴ |
\2234 |
therefore |
| ⟨ | ⟨ |
\2329 |
left-pointing angle bracket = bra |
| ⟩ | ⟩ |
\232A |
right-pointing angle bracket = ket |
| ⌈ | ⌈ |
\2308 |
left ceiling = apl upstile |
| ⌊ | ⌊ |
\230A |
left floor = apl downstile |
| ⌉ | ⌉ |
\2309 |
right ceiling |
| ⌋ | ⌋ |
\230B |
right floor |
| Знаки валют | |||
| ¤ | ¤ |
\00A4 |
currency sign |
| ¢ | ¢ |
\00A2 |
cent sign |
| € | € |
\20AC |
euro sign |
| £ | £ |
\00A3 |
pound sign |
| ¥ | ¥ |
\00A5 |
yen sign = yuan sign |
| Прочие символы | |||
| © | © |
\00A9 |
copyright sign |
| ™ | ™ |
\2122 |
trade mark sign |
| ® | ® |
\00AE |
registered sign = registered trade mark sign |
| § | § |
\00A7 |
section sign |
| ¦ | ¦ |
\00A6 |
broken bar = broken vertical bar |
| † | † |
\2020 |
dagger |
| ‡ | ‡ |
\2021 |
double dagger |
| ℑ | ℑ |
\2111 |
blackletter capital I = imaginary part |
| ℜ | ℜ |
\211C |
blackletter capital R = real part symbol |
| ℘ | ℘ |
\2118 |
script capital P = power set = Weierstrass p |
| ‾ | ‾ |
\203E |
overline = spacing overscore |
| ª | ª |
\00AA |
feminine ordinal indicator |
| º | º |
\00BA |
masculine ordinal indicator |
| ¶ | ¶ |
\00B6 |
pilcrow sign = paragraph sign |
| ‰ | ‰ |
\2030 |
per mille sign |
| | ­ |
\00AD |
soft hyphen = discretionary hyphen |
| | ‎ |
\200E |
left-to-right mark (for formatting only) |
| | ‏ |
\200F |
right-to-left mark (for formatting only) |
| Греческий алфавит | |||
| Α | Α |
\0391 |
greek capital letter alpha |
| α | α |
\03B1 |
greek small letter alpha |
| Β | Β |
\0392 |
greek capital letter beta |
| β | β |
\03B2 |
greek small letter beta |
| Γ | Γ |
\0393 |
greek capital letter gamma |
| γ | γ |
\03B3 |
greek small letter gamma |
| Δ | Δ |
\0394 |
greek capital letter delta |
| δ | δ |
\03B4 |
greek small letter delta |
| Ε | Ε |
\0395 |
greek capital letter epsilon |
| ε | ε |
\03B5 |
greek small letter epsilon |
| Ζ | Ζ |
\0396 |
greek capital letter zeta |
| ζ | ζ |
\03B6 |
greek small letter zeta |
| Η | Η |
\0397 |
greek capital letter eta |
| η | η |
\03B7 |
greek small letter eta |
| Θ | Θ |
\0398 |
greek capital letter theta |
| θ | θ |
\03B8 |
greek small letter theta |
| ϑ | ϑ |
\03D1 |
greek small letter theta symbol |
| Ι | Ι |
\0399 |
greek capital letter iota |
| ι | ι |
\03B9 |
greek small letter iota |
| Κ | Κ |
\039A |
greek capital letter kappa |
| κ | κ |
\03BA |
greek small letter kappa |
| Λ | Λ |
\039B |
greek capital letter lambda |
| λ | λ |
\03BB |
greek small letter lambda |
| Μ | Μ |
\039C |
greek capital letter mu |
| μ | μ |
\03BC |
greek small letter mu |
| Ν | Ν |
\039D |
greek capital letter nu |
| ν | ν |
\03BD |
greek small letter nu |
| Ξ | Ξ |
\039E |
greek capital letter xi |
| ξ | ξ |
\03BE |
greek small letter xi |
| Ο | Ο |
\039F |
greek capital letter omicron |
| ο | ο |
\03BF |
greek small letter omicron |
| Π | Π |
\03A0 |
greek capital letter pi |
| π | π |
\03C0 |
greek small letter pi |
| ϖ | ϖ |
\03D6 |
greek pi symbol |
| Ρ | Ρ |
\03A1 |
greek capital letter rho |
| ρ | ρ |
\03C1 |
greek small letter rho |
| Σ | Σ |
\03A3 |
greek capital letter sigma |
| σ | σ |
\03C3 |
greek small letter sigma |
| ς | ς |
\03C2 |
greek small letter final sigma (note) |
| Τ | Τ |
\03A4 |
greek capital letter tau |
| τ | τ |
\03C4 |
greek small letter tau |
| Υ | Υ |
\03A5 |
greek capital letter upsilon |
| υ | υ |
\03C5 |
greek small letter upsilon |
| ϒ | ϒ |
\03D2 |
greek upsilon with hook symbol |
| Φ | Φ |
\03A6 |
greek capital letter phi |
| φ | φ |
\03C6 |
greek small letter phi |
| Χ | Χ |
\03A7 |
greek capital letter chi |
| χ | χ |
\03C7 |
greek small letter chi |
| Ψ | Ψ |
\03A8 |
greek capital letter psi |
| ψ | ψ |
\03C8 |
greek small letter psi |
| Ω | Ω |
\03A9 |
greek capital letter omega |
| ω | ω |
\03C9 |
greek small letter omega |
| Диакритические знаки | |||
| ´ | ´ |
\00B4 |
acute accent = spacing acute |
| ¸ | ¸ |
\00B8 |
cedilla = spacing cedilla |
| ˆ | ˆ |
\02C6 |
modifier letter circumflex accent |
| ¯ | ¯ |
\00AF |
macron = spacing macron = overline = APL overbar |
| · | · |
\00B7 |
middle dot = Georgian comma = Greek middle dot |
| ˜ | ˜ |
\02DC |
small tilde |
| ¨ | ¨ |
\00A8 |
diaeresis = spacing diaeresis |
| Латиница с диакритическими знаками | |||
| Á | Á |
\00C1 |
latin capital letter A with acute |
| á | á |
\00E1 |
latin small letter a with acute |
| Â | Â |
\00C2 |
latin capital letter A with circumflex |
| â | â |
\00E2 |
latin small letter a with circumflex |
| Æ | Æ |
\00C6 |
latin capital letter AE = latin capital ligature AE |
| æ | æ |
\00E6 |
latin small letter ae = latin small ligature ae |
| À | À |
\00C0 |
latin capital letter A with grave = latin capital letter A grave |
| à | à |
\00E0 |
latin small letter a with grave = latin small letter a grave |
| Å | Å |
\00C5 |
latin capital letter A with ring above = latin capital letter A ring |
| å | å |
\00E5 |
latin small letter a with ring above = latin small letter a ring |
| Ã | Ã |
\00C3 |
latin capital letter A with tilde |
| ã | ã |
\00E3 |
latin small letter a with tilde |
| Ä | Ä |
\00C4 |
latin capital letter A with diaeresis |
| ä | ä |
\00E4 |
latin small letter a with diaeresis |
| Ç | Ç |
\00C7 |
latin capital letter C with cedilla |
| ç | ç |
\00E7 |
latin small letter c with cedilla |
| É | É |
\00C9 |
latin capital letter E with acute |
| é | é |
\00E9 |
latin small letter e with acute |
| Ê | Ê |
\00CA |
latin capital letter E with circumflex |
| ê | ê |
\00EA |
latin small letter e with circumflex |
| È | È |
\00C8 |
latin capital letter E with grave |
| è | è |
\00E8 |
latin small letter e with grave |
| Ð | Ð |
\00D0 |
latin capital letter ETH |
| ð | ð |
\00F0 |
latin small letter eth |
| Ë | Ë |
\00CB |
latin capital letter E with diaeresis |
| ë | ë |
\00EB |
latin small letter e with diaeresis |
| Í | Í |
\00CD |
latin capital letter I with acute |
| í | í |
\00ED |
latin small letter i with acute |
| Î | Î |
\00CE |
latin capital letter I with circumflex |
| î | î |
\00EE |
latin small letter i with circumflex |
| Ì | Ì |
\00CC |
latin capital letter I with grave |
| ì | ì |
\00EC |
latin small letter i with grave |
| Ï | Ï |
\00CF |
latin capital letter I with diaeresis |
| ï | ï |
\00EF |
latin small letter i with diaeresis |
| Ñ | Ñ |
\00D1 |
latin capital letter N with tilde |
| ñ | ñ |
\00F1 |
latin small letter n with tilde |
| Ó | Ó |
\00D3 |
latin capital letter O with acute |
| ó | ó |
\00F3 |
latin small letter o with acute |
| Ô | Ô |
\00D4 |
latin capital letter O with circumflex |
| ô | ô |
\00F4 |
latin small letter o with circumflex |
| Π| Π|
\0152 |
latin capital ligature OE |
| œ | œ |
\0153 |
latin small ligature oe |
| Ò | Ò |
\00D2 |
latin capital letter O with grave |
| ò | ò |
\00F2 |
latin small letter o with grave |
| Ø | Ø |
\00D8 |
latin capital letter O with stroke = latin capital letter O slash |
| ø | ø |
\00F8 |
latin small letter o with stroke, = latin small letter o slash |
| Õ | Õ |
\00D5 |
latin capital letter O with tilde |
| õ | õ |
\00F5 |
latin small letter o with tilde |
| Ö | Ö |
\00D6 |
latin capital letter O with diaeresis |
| ö | ö |
\00F6 |
latin small letter o with diaeresis |
| Š | Š |
\0160 |
latin capital letter S with caron |
| š | š |
\0161 |
latin small letter s with caron |
| ß | ß |
\00DF |
latin small letter sharp s = ess-zed |
| Þ | Þ |
\00DE |
latin capital letter THORN |
| þ | þ |
\00FE |
latin small letter thorn |
| Ú | Ú |
\00DA |
latin capital letter U with acute |
| ú | ú |
\00FA |
latin small letter u with acute |
| Û | Û |
\00DB |
latin capital letter U with circumflex |
| û | û |
\00FB |
latin small letter u with circumflex |
| Ù | Ù |
\00D9 |
latin capital letter U with grave |
| ù | ù |
\00F9 |
latin small letter u with grave |
| Ü | Ü |
\00DC |
latin capital letter U with diaeresis |
| ü | ü |
\00FC |
latin small letter u with diaeresis |
| Ý | Ý |
\00DD |
latin capital letter Y with acute |
| ý | ý |
\00FD |
latin small letter y with acute |
| Ÿ | Ÿ |
\0178 |
latin capital letter Y with diaeresis |
| ÿ | ÿ |
\00FF |
latin small letter y with diaeresis |