Question

我有一个标题，我想在标题之前和之后使用CSS伪元素插入一个具有特定背景的块：before和：after，并且我希望它们都向左浮动，因此它们在一行中。

问题在于我无法弄清楚如何选择元素的实际内容。让我们看看这个例子是用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元素？我可以以某种方式选择“文本在这里”并将课后应用于它吗？

提前致谢！

编辑：

让我以不同的方式解释这一点。请看这个链接：[link] http://css-tricks.com/examples/hrs/

我希望实现与上一个示例相同的操作，而不是通过content: "$";在CSS中插入文本，我希望将美元符号作为<h1>元素插入 - 元素 - ergo “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; 
}

在内容之前和之后插入元素

1 个答案: