CSS Tutorials

Overview

In CSS/HTML there are specific entities that can be placed via code. This is a list of some of the most used CSS entities and their HTML equivalents.

Using CSS to Place an Entity

In CSS there are occasions where you don’t have access to the HTML being output, or you want to include something as a part of the document styling. This is where you would use either the ::before or ::after pseudo elements and the CSS code for the entity.

The following will place a small ♥ before the list item.

ul li::before {
    content: "\2665 ";
}

Note

Notice that we included a space after the entity code. This is to give it some space before the text begins. Another option could be to wrap it in a <span> with a class attribute and apply a CSS style to give the entity breathing room.

The following will place a small ♥ after the list item.

ul li::after {
    content: " \2665";
}

Currency Entities

SymbolEntity CodeHTML CodeCSS CodeSymbol Name
$&dollar;&#36;\0024Dollar Sign
¢&cent;&#162;\00A2Cent Sign
&euro;&#8364;\020ACEuro Sign
£&pound;&#163;\00A3Pound Sign
¤&curren;&#164;\00A4Currency Sign
¥&yen;&#165;\00A5Yen Sign

Arrow Entities

SymbolEntity CodeHTML CodeCSS CodeSymbol Name
&olarr;&#8634;\21BAAnticlockwise Open Circle Arrow
&orarr;&#8635;\21BBClockwise Open Circle Arrow
&lharu;&#8636;\21BCLeftwards Harpoon with Barb Upwards
&lhard;&#8637;\21BDLeftwards Harpoon with Barb Downwards
&uharr;&#8638;\21BEUpwards Harpoon with Barb Rightwards
&uharl;&#8639;\21BFUpwards Harpoon with Barb Leftwards
&rharu;&#8640;\21C0Rightwards Harpoon with Barb Upwards
&rhard;&#8641;\21C1Rightwards Harpoon with Barb Downwards
&dharr;&#8642;\21C2Downwards Harpoon with Barb Rightwards
&dharl;&#8643;\21C3Downwards Harpoon with Barb Leftwards
&rlarr;&#8644;\21C4Rightwards Arrow Over Leftwards Arrow
&udarr;&#8645;\21C5Upwards Arrow Leftwards of Downwards Arrow
&lrarr;&#8646;\21C6Leftwards Arrow Over Rightwards Arrow
&llarr;&#8647;\21C7Leftwards Paired Arrows
&uuarr;&#8648;\21C8Upwards Paired Arrows
&rrarr;&#8649;\21C9Rightwards Paired Arrows
&ddarr;&#8650;\21CADownwards Paired Arrows
&lrhar;&#8651;\21CBLeftwards Harpoon Over Rightwards Harpoon
&rlhar;&#8652;\21CCRightwards Harpoon Over Leftwards Harpoon
&nlArr;&#8653;\21CDLeftwards Double Arrow with Stroke
&nhArr;&#8654;\21CELeft Right Double Arrow with Stroke
&nrArr;&#8655;\21CFRightwards Double Arrow with Stroke
&lArr;&#8656;\21D0Leftwards Double Arrow
&uArr;&#8657;\21D1Upwards Double Arrow
&rArr;&#8658;\21D2Rightwards Double Arrow
&dArr;&#8659;\21D3Downwards Double Arrow
&hArr;&#8660;\21D4Left Right Double Arrow
&vArr;&#8661;\21D5Up Down Double Arrow
&nwArr;&#8662;\21D6North West Double Arrow
&neArr;&#8663;\21D7North East Double Arrow
&seArr;&#8664;\21D8South East Double Arrow
&swArr;&#8665;\21D9South West Double Arrow
&lAarr;&#8666;\21DALeftwards Triple Arrow
&rAarr;&#8667;\21DBRightwards Triple Arrow
&ziglarr;&#8668;\21DCLeftwards Squiggle Arrow
&zigrarr;&#8669;\21DDRightwards Squiggle Arrow
&larrb;&#8676;\21E4Leftwards Arrow To Bar
&rarrb;&#8677;\21E5Rightwards Arrow To Bar
&duarr;&#8693;\21F5Downwards Arrow Leftwards of Upwards Arrow
&hoarr;&#8703;\21FFLeft Right Open-Headed Arrow
&loarr;&#8701;\21FDLeftwards Open-Headed Arrow
&roarr;&#8702;\21FERightwards Open-Headed Arrow
&xlarr;&#10229;\27F5Long Leftwards Arrow
&xrarr;&#10230;\27F6Long Rightwards Arrow
&xharr;&#10231;\27F7Long Left Right Arrow
&xlArr;&#10232;\27F8Long Leftwards Double Arrow
&xrArr;&#10233;\27F9Long Rightwards Double Arrow
&xhArr;&#10234;\27FALong Left Right Double Arrow
&dzigrarr;&#10239;\27FFLong Rightwards Squiggle Arrow
&xmap;&#10236;\27FCLong Rightwards Arrow from Bar
&nvlArr;&#10498;\2902Leftwards Double Arrow with Vertical Stroke
&nvrArr;&#10499;\2903Rightwards Double Arrow with Vertical Stroke
&nvHarr;&#10500;\2904Left Right Double Arrow with Vertical Stroke
&Map;&#10501;\2905Rightwards Two-Headed Arrow from Bar
&lbarr;&#10508;\290CLeftwards Double Dash Arrow
&rbarr;&#10509;\290DRightwards Double Dash Arrow
&lBarr;&#10510;\290ELeftwards Triple Dash Arrow
&rBarr;&#10511;\290FRightwards Triple Dash Arrow
&RBarr;&#10512;\2910Rightwards Two-Headed Triple Dash Arrow
&DDotrahd;&#10513;\2911Rightwards Arrow with Dotted Stem
&UpArrowBar;&#10514;\2912Upwards Arrow To Bar
&DownArrowBar;&#10515;\2913Downwards Arrow To Bar
&Rarrtl;&#10518;\2916Rightwards Two-Headed Arrow with Tail
&latail;&#10521;\2919Leftwards Arrow-Tail
&ratail;&#10522;\291ARightwards Arrow-Tail
&lAtail;&#10523;\291BLeftwards Double Arrow-Tail
&rAtail;&#10524;\291CRightwards Double Arrow-Tail
&larrfs;&#10525;\291DLeftwards Arrow To Black Diamond
&rarrfs;&#10526;\291ERightwards Arrow To Black Diamond
&larrbfs;&#10527;\291FLeftwards Arrow from Bar To Black Diamond
&rarrbfs;&#10528;\2920Rightwards Arrow from Bar To Black Diamond
&nwarhk;&#10531;\2923North West Arrow with Hook
&nearhk;&#10532;\2924North East Arrow with Hook
&searhk;&#10533;\2925South East Arrow with Hook
&swarhk;&#10534;\2926South West Arrow with Hook
&nwnear;&#10535;\2927North West Arrow and North East Arrow
&nesear;&#10536;\2928North East Arrow and South East Arrow
&seswar;&#10537;\2929South East Arrow and South West Arrow
&swnwar;&#10538;\292ASouth West Arrow and North West Arrow

&cudarrr;&#10549;\2935Arrow Pointing Rightwards Then Curving Downwards
&ldca;&#10550;\2936Arrow Pointing Downwards Then Curving Leftwards
&rdca;&#10551;\2937Arrow Pointing Downwards Then Curving Rightwards
&cudarrl;&#10552;\2938Right-Side Arc Clockwise Arrow
&larrpl;&#10553;\2939Left-Side Arc Anticlockwise Arrow
&curarrm;&#10556;\293CTop Arc Clockwise Arrow with Minus
&cularrp;&#10557;\293DTop Arc Anticlockwise Arrow with Plus
&rarrpl;&#10565;\2945Rightwards Arrow with Plus Below
&harrcir;&#10568;\2948Left Right Arrow Through Small Circle
&Uarrocir;&#10569;\2949Upwards Two-Headed Arrow from Small Circle
&lurdshar;&#10570;\294ALeft Barb Up Right Barb Down Harpoon
&ldrushar;&#10571;\294BLeft Barb Down Right Barb Up Harpoon
&RightUpDownVector;&#10575;\294FUp Barb Right Down Barb Right Harpoon
&DownLeftRightVector;&#10576;\2950Left Barb Down Right Barb Down Harpoon
&LeftUpDownVector;&#10577;\2951Up Barb Left Down Barb Left Harpoon
&LeftVectorBar;&#10578;\2952Leftwards Harpoon with Barb Up To Bar
&RightVectorBar;&#10579;\2953Rightwards Harpoon with Barb Up To Bar
&RightUpVectorBar;&#10580;\2954Upwards Harpoon with Barb Right To Bar
&RightDownVectorBar;&#10581;\2955Downwards Harpoon with Barb Right To Bar
&DownLeftVectorBar;&#10582;\2956Leftwards Harpoon with Barb Down To Bar
&DownRightVectorBar;&#10583;\2957Rightwards Harpoon with Barb Down To Bar
&LeftUpVectorBar;&#10584;\2958Upwards Harpoon with Barb Left To Bar
&LeftDownVectorBar;&#10585;\2959Downwards Harpoon with Barb Left To Bar
&LeftTeeVector;&#10586;\295ALeftwards Harpoon with Barb Up from Bar
&RightTeeVector;&#10587;\295BRightwards Harpoon with Barb Up from Bar
&RightUpTeeVector;&#10588;\295CUpwards Harpoon with Barb Right from Bar
&RightDownTeeVector;&#10589;\295DDownwards Harpoon with Barb Right from Bar
&DownLeftTeeVector;&#10590;\295ELeftwards Harpoon with Barb Down from Bar
&DownRightTeeVector;&#10591;\295FRightwards Harpoon with Barb Down from Bar
&LeftUpTeeVector;&#10592;\2960Upwards Harpoon with Barb Left from Bar
&LeftDownTeeVector;&#10593;\2961Downwards Harpoon with Barb Left from Bar
&lHar;&#10594;\2962Leftwards Harpoon with Barb Up Above Leftwards Harpoon with Barb Down
&uHar;&#10595;\2963Upwards Harpoon with Barb Left Beside Upwards Harpoon with Barb Right
&rHar;&#10596;\2964Rightwards Harpoon with Barb Up Above Rightwards Harpoon with Barb Down
&dHar;&#10597;\2965Downwards Harpoon with Barb Left Beside Downwards Harpoon with Barb Right
&luruhar;&#10598;\2966Leftwards Harpoon with Barb Up Above Rightwards Harpoon with Barb Up
&ldrdhar;&#10599;\2967Leftwards Harpoon with Barb Down Above Rightwards Harpoon with Barb Down
&ruluhar;&#10600;\2968Rightwards Harpoon with Barb Up Above Leftwards Harpoon with Barb Up
&rdldhar;&#10601;\2969Rightwards Harpoon with Barb Down Above Leftwards Harpoon with Barb Down
&lharul;&#10602;\296ALeftwards Harpoon with Barb Up Above Long Dash
&llhard;&#10603;\296BLeftwards Harpoon with Barb Down Below Long Dash
&rharul;&#10604;\296CRightwards Harpoon with Barb Up Above Long Dash
&lrhard;&#10605;\296DRightwards Harpoon with Barb Down Below Long Dash
&udhar;&#10606;\296EUpwards Harpoon with Barb Left Beside Downwards Harpoon with Barb Right
&duhar;&#10607;\296FDownwards Harpoon with Barb Left Beside Upwards Harpoon with Barb Right
&RoundImplies;&#10608;\2970Right Double Arrow with Rounded Head
&erarr;&#10609;\2971Equals Sign Above Rightwards Arrow
&simrarr;&#10610;\2972Tilde Operator Above Rightwards Arrow
&larrsim;&#10611;\2973Leftwards Arrow Above Tilde Operator
&rarrsim;&#10612;\2974Rightwards Arrow Above Tilde Operator
&rarrap;&#10613;\2975Rightwards Arrow Above Almost Equal To
&ltlarr;&#10614;\2976Less-Than Above Leftwards Arrow
&gtrarr;&#10616;\2978Greater-Than Above Rightwards Arrow
&subrarr;&#10617;\2979Subset Above Rightwards Arrow
&suplarr;&#10619;\297BSuperset Above Leftwards Arrow
&lfisht;&#10620;\297CLeft Fish Tail
&rfisht;&#10621;\297DRight Fish Tail
&ufisht;&#10622;\297EUp Fish Tail
⥿&dfisht;&#10623;\297FDown Fish Tail

CSS Quotation Mark Characters

ResultDescriptionEntity Number
"double quote\0022
'single quote\0027
single, left angle quote\2039
single, right angle quote\203A
«double, left angle quote\00AB
»double, right angle quote\00BB
left quote\2018
right quote\2019
left quote\201C
right quote\201D
double quote\201E

Miscellaneous Entities

SymbolEntity CodeHTML CodeCSS CodeSymbol Name
&&amp;&#38;\0026Ampersand
©
&copy;&#169;\00A9Copyright Sign
®&reg;&#174;\00AERegistered Sign
&trade;&#8482;\2122Trade Mark Sign
@&commat;&#64;\0040Commercial At
&incare;&#8453;\2105Care Of
&mho;&#8487;\2127Inverted Ohm Sign
&starf;&#9733;\2605Black Star
&star;&#9734;\2606White Star

&female;&#9792;\2640Female Sign

&male;&#9794;\2642Male Sign

&spades;&#9824;\2660Black Spade Suit

&clubs;&#9827;\2663Black Club Suit

&hearts;&#9829;\2665Black Heart Suit

&diams;&#9830;\2666Black Diamond Suit
&sung;&#9834;\266AEighth Note
&flat;&#9837;\266DMusic Flat Sign
&natural;&#9838;\266EMusic Natural Sign
&sharp;&#9839;\266FMusic Sharp Sign
&check;&#10003;\2713Check Mark
&cross;&#10007;\2717Ballot X
&malt;&#10016;\2720Maltese Cross
&sext;&#10038;\2736Six Pointed Black Star
«&laquo;&#171;\00ABLeft-Pointing Double Angle Quotation Mark
»&raquo;&#187;\00BBRight-Pointing Double Angle Quotation Mark
&lsaquo;&#8249;\2039Single Left-Pointing Angle Quotation Mark
&rsaquo;&#8250;\203ASingle Right-Pointing Angle Quotation Mark
<&lt;&#60;\003CLess-Than Sign
>&gt;&#62;\003EGreater-Than Sign
&lang;&#9001;\2329Left-Pointing Angle Bracket
&rang;&#9002;\232ARight-Pointing Angle Bracket

CSS Notes:


We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.