Skip to content

Instantly share code, notes, and snippets.

@sntran

sntran/arrows.css

Forked from danott/entities.css
Last active December 17, 2015 19:48
Show Gist options
  • Save sntran/5662538 to your computer and use it in GitHub Desktop.
Save sntran/5662538 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. sntran revised this gist Oct 12, 2013. No changes.
  2. sntran revised this gist Oct 12, 2013. No changes.
  3. Son Tran-Nguyen revised this gist May 28, 2013. 2 changed files with 53 additions and 26 deletions.
    53 changes: 53 additions & 0 deletions arrows.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,53 @@
    /* Daniel Ott
    * entities.css
    * 31 January 2011
    *
    * Updated: 28 May 2013
    * Son Tran
    *
    * Adding arrows to thinks makes them more clickable. Right?
    * Use CSS's :after pseudo-selector to insert hexadecimal values
    * of html entities into the document. Less markup. More awesome.
    */
    .up-arrow,
    .right-arrow,
    .down-arrow,
    .left-arrow {
    *zoom: expression(
    this.runtimeStyle.zoom="1",
    this.appendChild( document.createElement("ie") ).className="after"
    );
    }

    .up-arrow:after, .up-arrow > .after {
    content:'\00a0\25b2';
    }

    .right-arrow:after, .up-arrow > .after {
    content:'\00a0\25b6';
    }

    .down-arrow:after, .down-arrow > .after {
    content:'\00a0\25bc';
    }

    .left-arrow:after, .left-arrow > .after {
    content:'\00a0\25c0';
    }

    /*-----------------------------------------------
    A cheat sheet of entities I've used
    -------------------------------------------------
    Entity Hexcode Description
      \00a0 A space
    ▲ \25b2 Up-pointing triangle ▲
    ▴ \25b4 Up-pointing small triangle ▴
    ▶ \25b6 Right-pointing triangle ▶
    ▸ \25b8 Right-pointing small triangle ▸
    ▼ \25bc Down-pointing triangle ▼
    ▾ \25be Down-pointing small triangle ▾
    ◀ \25c0 Left-pointing triangle ◀
    ◂ \25c2 Left-pointing small triangle ◂
    -----------------------------------------------*/
    26 changes: 0 additions & 26 deletions entities.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,26 +0,0 @@
    /* Daniel Ott
    * entities.css
    * 31 January 2011
    *
    * Adding arrows to thinks makes them more clickable. Right?
    * Use CSS's :after pseudo-selector to insert hexadecimal values
    * of html entities into the document. Less markup. More awesome.
    */

    .add-an-arrow:after {
    content:'\00a0\25b8'; /*  ▸ in Hexadecimal */
    }

    /*-----------------------------------------------
    A cheat sheet of entities I've used
    -------------------------------------------------
    Entity Hexcode Description
      \00a0 A space
    ◀ \25c0 Left arrow with no tail.
    ▸ \25b8 Right arrow with no tail.
    ▾ \25be Down arrow with no tail.
    ← \2190 Left arrow with a tail.
    → \2192 Right arrow with a tail.
    -----------------------------------------------*/
  4. Daniel Ott revised this gist Jan 31, 2011. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions entities.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,6 @@
    /* Daniel Ott
    * entities.css
    * 31 January 2011
    *
    * Adding arrows to thinks makes them more clickable. Right?
    * Use CSS's :after pseudo-selector to insert hexadecimal values
  5. Daniel Ott created this gist Jan 31, 2011.
    25 changes: 25 additions & 0 deletions entities.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    /* Daniel Ott
    * entities.css
    *
    * Adding arrows to thinks makes them more clickable. Right?
    * Use CSS's :after pseudo-selector to insert hexadecimal values
    * of html entities into the document. Less markup. More awesome.
    */

    .add-an-arrow:after {
    content:'\00a0\25b8'; /*  ▸ in Hexadecimal */
    }

    /*-----------------------------------------------
    A cheat sheet of entities I've used
    -------------------------------------------------
    Entity Hexcode Description
      \00a0 A space
    ◀ \25c0 Left arrow with no tail.
    ▸ \25b8 Right arrow with no tail.
    ▾ \25be Down arrow with no tail.
    ← \2190 Left arrow with a tail.
    → \2192 Right arrow with a tail.
    -----------------------------------------------*/