Matt的博客是如何在每个帖子标题中插入玫瑰花的？

Question

对不起，这是很基本的，但我是个初学者。

Matt的博客，一文不值，在每个帖子标题下插入玫瑰花作为他的帖子模板的一部分。

• 我如何使用Firebug来找到这些玫瑰花从哪里来？我试过检查条目标题元素，但我没有看到任何似乎与玫瑰花相关的东西。
• 我猜这些玫瑰花是unicode字符是对的吗?还是还有其他的作用呢？

谢谢!

Answer 1

可以使用::after选择器在所有h1元素之后添加内容

CSS

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

查看这个活动的示例

然而，该网站使用它作为背景图像。您可以通过使用元素检查器并查看其属性来发现这一点。见所附截图

​

其性质如下：

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

Answer 2

您浏览器中的开发工具是您的朋友。在我的Safari (也可以在火狐中使用)中使用“检查元素”，我很快就能发现，在他们的theme-journal.css文件的第121行中，它们具有这样的风格，它添加了玫瑰花：

.entry-header {
    font-size: 2.4em;
    line-height: 1.3;
    margin: 0 20px 10px;
    background: url(theme-journal_black/date-header-bg.gif) no-repeat 50% bottom;
    padding: 0 0 20px 0;
    text-align: center;
}

正如@jacktheripper所建议的那样，使用h1:after是一个更优雅的想法，但与较旧的浏览器不兼容。