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

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

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