Grow your CSS skills. Land your dream job.

Last updated on:

End Articles with Ivy Leaf

p:last-child:after {
       content: "\2766"; /* Here comes the ivy leaf */
       font-size: 150%; /* Makes the leaf larger than the normal text */
       padding-left: 10px; /* Leaf won't clash with the last letter of the text */
       float: right; /* Horizontal position is set to the right edge of the column */
       position: relative; /* This is just an homage to Albert Einstein */
       top: 15px /*Vertical distance from the last line of text */
}

Comments

  1. Any example for this css?

  2. Permalink to comment#

    #wrapper p:last-child:after {
    content: “\2766″; /* Here comes the ivy leaf */
    font-size: 150%; /* Makes the leaf larger than the normal text */
    position: relative; /* This is just an homage to Albert Einstein */
    top: 15px; /*Vertical distance from the last line of text */
    display: block; /* Put it on a new line */
    text-align: center; /* Put it in the middle */
    }

    That’s what I’m using, and it looks great.

    • huzaifa
      Permalink to comment#

      what this number denotes “\2766″ ,how can i find the ref number for other images.

      content: “\2766″; /* Here comes the ivy leaf */

  3. huzaifa
    Permalink to comment#

    what this number denotes “\2766″ ,how can i find the ref number for other images.

    content: “\2766″; /* Here comes the ivy leaf */

  4. davyne
    Permalink to comment#

    Really cool. I randomly entered unicode numbers until I found the star character (2605)I was looking for…

    My question is, I can get it to work using css, but I cant’ get it to work within a the html of a web page.

    I don’t want it at the end of every story in a div, but only a select few places. I’ve tried and instead get a completely different character than what I get when I use css. Differences in font??

    What does work is to assign a span .star:after {content:”\2605″} and then within html use a blank span reference <span class=”star”></span>.

    No surprise :last-child doesn’t work in IE, but using the span tags does.

    • davyne
      Permalink to comment#

      oops – the weird character here is the weird one I was referring to. I added the &# in front of the number, and the ; at the end, in typical unicode fashion.

    • davyne
      Permalink to comment#

      Sorry to confuse anyone, but I discovered &; is for ascii, and &#x; for unicode.
      This, inserting &#x2605; worked to insert unicode directly into html.

  5. Permalink to comment#

    ” position: relative; /* This is just an homage to Albert Einstein */”
    The most outstanding part of this code, love it, really :)

    For those who are looking for Unicode symbols wikipedia has great tables ordered by categories

  6. I live this tip, really smart. With some modification (p:first-child:before and p:last-child:after) I can use for quote simbol instead of image.

    Thanks! :-)

  7. Mark
    Permalink to comment#

    Can someone give me an example of what the HTML would look like?

  8. <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    A bunch of times.

  9. What IS this? I can’t even find an example. Putting it in my style sheet does nothing to my page(s). Could anyone please elaborate and/or give an example url? Thanks.

  10. Ait, I figured it out. Thanks! :)

    • Ang
      Permalink to comment#

      You’re not a web designer are you? Stick to Word….

    • Joe
      Permalink to comment#

      Wow Ang, you’re a typical prick that can be found in the “designer” world. Nothing but A-Holes. This is why most people prefer to ship stuff to India. Don’t have to deal with dips**ts like you.

  11. Chris

    http://www.isthisthingon.org/unicode/allchars1.php

    This has just about every unicode you could imagine. (it may take a bit to load)

  12. Pranitha
    Permalink to comment#

    The “Font Awesome” icons by Twitter Bootstrap has a huge number of icons along with their unicode.
    You do need to download the “Font-Awesome” font though before you could use any of the icons.

    http://fortawesome.github.io/Font-Awesome/cheatsheet/

  13. Was kinda unhappy that an example was not shown…. So here is an example :
    Ivy Jsfiddler example

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".