CSS - 在段落标题中使用图像和重音线

Question

常见的和美观的印刷效果是小图像，可能是一个风格化的箭头，某些文本和重音线。事情是这样的：

- >现在这一段---------------------------------

“ - >”是某种小图形，而“-------”是重音线，可能是彩色的。

我想在css中这样做，因此在内容管理系统中，作者只需简单地将行标记为“h3”，样式定义将添加图形和重音线。

我可以把图形，使用CSS的CSS，看起来像这样：

HD3 { 背景图像：网址（/image/arrow_button.gif）; background-position：left top; background-repeat：norepeat; padding-left：55px; }

但我不知道如何添加下面的重音线。重音线应该在文本之后开始并继续到页面的右边距。

Answer 1

有几种方法可以做到这一点。最好的解决办法可以是去

<h3><strong>Words</strong></h3> 

与你有上面加

h3 strong { background-color:#ffffff; padding: 0 5px; } /*if white is the background color you want*/ 

，使背景图像包括你的箭头，并持续行CSS，而图像一样宽它的容器的最大宽度，如果有的话。

通过为h3中的元素声明背景颜色，给出图像停止的错觉，并在另一图像中拾取线条。请注意，如果h3可能包装，你将不得不做一些计算。你可以进入更复杂的解决方案。

或者你可以只内嵌的图像：

<h3>Words <img src=".." alt="" /></h3> 

请注意，这意味着你的演讲更加直接的HTML elemnt控制的存在，这在某种程度上是次优的，但肯定的是简单并且不是语义上的噩梦，因为它没有隐藏任何内容。