:before 伪元素不适用于 h1 标签答案

【问题标题】：:before psuedo element not working on h1 tag:before 伪元素不适用于 h1 标签
【发布时间】：2014-11-26 08:14:46
【问题描述】：

我无法让 :before 伪类在包含 H1 标签的 div 之前插入图标字体。我在网上看到的所有示例都使用 p 或 i 插入，但是我想使用 H1 标签，因为每个标签都会有一个单独的 ID 和类，对应于一些 animate.css 淡入淡出和延迟效果。

为简单起见，我在下面的示例中将字体图标替换为井号。这个想法是图标字体将出现在 div 之前，而不是每个 h1 标签（我可以这样做） - 换句话说；四行文本和一种图标字体。我的感觉是这与显示属性或嵌套/子级有关，但完全不知如何解决。非常感谢任何帮助。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

    #wrapper {
    max-width: 800px;
    margin:0 auto;
    background-color: rgb(201, 238, 219);
    }

    .theLines {
    width: 300px;
    border: solid 1px black;
    padding: 20px;
    }


    .theLines:before{
    font-family: ;
    content: "#";
    color:red;
    font-size:3em;
    border: solid 1px red;
    }

</style>
</head>


<body id="wrapper" class="">

        <div id="container">
            <div class="theLines">
                <h1>Line 1</h1>
                <h1>Line 2</h1>
                <h1>Line 3</h1>
                <h1>Line 4</h1>
            </div>
        </div>

</body>
</html>

【问题讨论】：

嗯，上面在 jsfiddle 上似乎很好：jsfiddle.net/djr2uz9c
我试图让它出现在前面，就像这个例子jsfiddle.net/4Rakx/87
@user3324665 然后你应该在h1上使用:before。
但是，如果我在 h1 上使用 :before，我会得到四个图标 - 我只想要一个图标，四个 h1
请注意，在同一页面上使用多个
标签对于 SEO 来说不是一个好习惯。尽量在页面上只做一个
并且避免在里面使用属性和标签（
or
)跨度>

标签： css icons pseudo-element pseudo-class

【解决方案1】：

一种解决方案是使用相对于#container 的定位来实现：

Demo Fiddle

<div id="container">
    <div class="theLines">
         <h1>Line 1</h1>
         <h1>Line 2</h1>
         <h1>Line 3</h1>
         <h1>Line 4</h1>
    </div>
</div>

CSS

 #wrapper {
     max-width: 800px;
     margin:0 auto;
     background-color: rgb(201, 238, 219);
 }
 #container {
     position:relative; /* <-- set 'base' positioning */
 }
 .theLines {
     width: 300px;
     border: solid 1px black;
     padding: 20px; 
     margin-left:40px; /* <-- move away from left side of #container */
 }
 .theLines:before {
     content:"#";
     color:red;
     font-size:3em;
     border: solid 1px red;
     position:absolute; /* allow for adjacent positioning relative to other children of #container */
     left:0; /* position on left hand side of #container */
     display:inline-block;
 }

【讨论】：

那么您可以安全地删除display: inline-block;，因为在这种情况下display 的计算值将是block。
谢谢 - 非常感谢！

并且避免在里面使用属性和标签（

Demo Fiddle