Code Snippet
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 */
}
Any example for this css?
#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.
what this number denotes “\2766″ ,how can i find the ref number for other images.
content: “\2766″; /* Here comes the ivy leaf */
what this number denotes “\2766″ ,how can i find the ref number for other images.
content: “\2766″; /* Here comes the ivy leaf */
Here you can find the abundance of unicodes here: http://www.decodeunicode.org/en/u+2615.
If you want to replace the ivy leaf symbol just replace the number accordingly, i.e.:
instead of “\2766″ put “\2615″ ( hot beverage )
thnxs
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.
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.
Sorry to confuse anyone, but I discovered &; is for ascii, and &#x; for unicode.
This, inserting ★ worked to insert unicode directly into html.
” 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
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! :-)
Can someone give me an example of what the HTML would look like?
A bunch of times.
DigWP
A book and blog co-authored by Jeff Starr and myself about the World's most popular publishing platform.
Quotes on Design
Design, like Art, can be an elusive word to define and an awfully fun thing to have opinions about.
HTML-Ipsum
One-click copy to clipboard access to Lorem Ipsum text that comes wrapped in a variety of HTML.
Bookshelf
Hey Chris, what books do you recommend? These, young fertile mind, these.