Question

我无法得到：在伪类之前在包含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>

Answer 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;
 }

：在伪元素不在h1标签上之前

1 个答案:

Demo Fiddle