Code Snippet

Home » Code Snippets » CSS » End Articles with Ivy Leaf

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 */
}

Subscribe to The Thread

  1. Any example for this css?

  2. #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

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

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

  3. huzaifa

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

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

  4. davyne

    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

      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

      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. ” 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

    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.

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~