将图像附加到第一个字母

Question

我有一个问题 如何使用CSS将图像附加到H1的第一个字母？ 见图 有什么想法吗？

Answer 1

您可以尝试使用:before伪类来附加图像。

示例：http://jsfiddle.net/8o0z6a8r/1/

<sytle>
h1:before {
    content: url(http://placehold.it/50x50);
    width: 50px;
    height: 50px;
    position: relative;
    top: 50px;
    left: 20px;
}
</style>

<h1>LINKBOUND's</h1>

Answer 2

您可以执行以下操作：jsFiddle

<div id="container">
    <h1 class="maintitle">LINKBOUND</h1>
</div>

CSS：

#id{
    position:relative;
}

.maintitle{
    font-size:100pt;
}

.maintitle:before{
   content: url('http://placehold.it/75/75');
  position:absolute;
  top:170px;
}