html - 在内容前后插入元素

Question

我有一个标题，我想用 CSS 伪元素 :before 和 :after 在标题前后插入一个具有特定背景的 block ，我希望它们都向左浮动，以便它们排成一行。

问题是我不知道如何选择元素的实际内容。让我们看看这个用 DIV 实现的例子:

HTML:

<div class="line"></div>
<h1>Text here</h1>
<div class="line"></div>

CSS:

.line {
    display: block;
    width: 150px;
    height: 20px;
    float: left;
    background-color: grey;
}

h1 {
    display: block;
    padding: 0 10px 0 10px;
    width: 100px;
    height: 20px;
    font-size: 20px;
    float: left;
    margin: 0;
    text-align: center;
}

所以这会起作用。但是，有没有办法用 h1 的 :before 和 :after 元素实现相同的效果？我能以某种方式选择“此处的文本”并对其应用 :after class 吗？

提前致谢!

编辑:

让我用不同的方式解释一下。请参阅此链接:[链接] http://css-tricks.com/examples/hrs/

我想实现与上一个示例相同的效果，只是不是通过 content: "$"; 插入文本在 CSS 中，我希望将美元符号作为 <h1> 插入-element - 因此将“hr”环绕在 h1 周围。

Answer 1

如果我没理解错的话，你想要这样的东西:

 h1, h1:before, h1:after {
   display:inline-block;
   float:left;
}

h1 {
   height: 16px;
   width: auto;
   position:relative;
   padding:0 20px;
}

h1:before {
   content: " ";
   background:url(...);
   height: 16px;
   width: 16px;
   position:absolute;
   left:0; 
}


h1:after {
   content: " ";
   background:url(...);
   height: 16px;
   width: 16px;
   position:absolute;
   right:0; 
}