Question

我正在尝试创建一个PSD文件的模拟，但我无法在博客文章底部获得一些标记来表现。

这是图片的链接;

http://imageshack.com/a/img923/5718/rfVFqe.png

（我暂时不允许发布真实图片）

到目前为止，这是我的css代码;

.comment {  content:url(comment.png) ; height:auto; width:auto;  }

然后在html;

 <div class="comment"><p>comments</p></div>

然而，文字根本没有出现。我不确定我是否能以这种方式工作？

谢谢大家。

Answer 1

如果我正确理解了您的问题，那么您正试图在＆＃34; <div class="comment"><p>comments</p></div>＆＃34;之后出现comment.png通过使用内容css属性。

它没有显示的原因是＆＃34;内容属性与：before和：after伪元素一起使用，以插入生成的内容。＆＃34; -W3C

Here is a fiddle where the comment is showing up after the image

Answer 2

为什么不使用background: url(comment.png)呢？然后将一些padding-left添加到div。

代码：

.comment{ 
  background: url('https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/bubble-24-24.png') no-repeat;
  padding-left: 30px;
  height: 24px;
  float: left;
  margin-right: 10px;
}
.comment p{
  margin: 0
}

<div class="comment"><p>Comments</p></div>
<div class="comment"><p>Comments</p></div>
<div class="comment"><p>Comments</p></div>

Answer 3

我最近对页面的页脚做了类似的事情，但我不得不使用reduce和img标记。

那是我的标记，我的CSS看起来像是：

<div class="comment">
<img src="svg/phone.svg" alt="Phone">
  <p>800-888-0123</p>
  <img src="svg/email.svg" alt="Email">
  <p>billy@billsplumbing.ca</p>
</div>

我不知道这是否是你正在寻找的，但这就是我基本上所做的事情。

在纯CSS中向右创建带有小文本标签的图像

3 个答案: