Tony B 86

I am trying to add a small symbol to the end of a paragraph in a section (similar to how magazines end an article with a sphere or square after the period). I can add the image in the html obviously but I would like to make it a reusable style for only the last paragraph in a section or a paragraph with a class I guess. Is there a pseudo class or something to throw this into?

2 answers

6
points

Consider the CSS3 pseudo-selector :after. IE8, Firefox, Safari, Chrome and Opera supports it (see http://www.quirksmode.org/css/contents.html#t15).

CSS:

.lastParagraphInSection:after {
    content: url(path/to/symbol.png);
}

HTML:

<p class="lastParagraphInSection">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt semper erat, in scelerisque dolor consequat vel.</p>
Answered about 9 years ago by Jesper Kaltoft
  • This looks great Tony B about 9 years ago
  • ideally even: section p:last-child:after { content: url(path/to/symbol.png); } Eric Meyer about 9 years ago
Jordan 469
0
points

If I understand what you are asking, you just want to use a background image on one specific paragraph...so you can do this in CSS. Just give the paragraph a different class than all the others, and use the command classname { background-image: url(imagename.jpg); }. Then you can have it repeat or no repeat. So your final code would look something like (if your using a p tag) p { background-image: url(smallPic.jpg); background-repeat: repeat; }

Answered about 9 years ago by Jordan
  • That would add the image only at the left, right, top, center, or bottom coordinates of the whole block element but I need it to be just after the last character in a paragraph. I think what I will do is just put the image into the HTML of the page after the copy that way it will be at the end regardless of the flow. Tony B about 9 years ago