Search code examples
cssfirebug

How does Matt Haughey's blog insert rosettes in each post title?

Sorry this is so basic, but I'm a beginner.

Matt Haughey's blog, A Whole Lotta Nothing, inserts rosettes under each post title as part of his post template.

  • How can I use Firebug to find where in his CSS these rosettes come from? I've tried inspecting the entry-header element but I'm not seeing anything that that seems tied to the rosettes.
  • Am I right in guessing that those rosettes are unicode characters, or is there something else at work?

Thanks!

Solution

  • You can use the ::after selector to add content after all h1 elements

    CSS

    h1:after {
    content: url("imagesource.jpg");
    display: block;
}​

    See this live example

    However, the site in question uses it as a background image. You can find this out by using the element inspector, and looking at its attributes. See the attached screenshot

    Its properties are as follows:

    background: url(theme-journal_black/date-header-bg.gif) no-repeat 50% bottom;