如何在包含伪元素'before'的 css 代码中包含 display：block

Question

我在侧菜单中使用伪元素：before来合并缩进的图标和文本，并希望使用display:block，这样链接就很容易点击。添加.sidemenu nav li a｛display:block；｝或其轻微变体只会产生不受欢迎的换行符。显示：块可以工作吗？或者有更好的替代方案吗？

    .sidemenu-nav { width:15em; border-top:#cc9999 1px solid; padding-left:0; font-size:0.8em; }
    .sidemenu-nav li:before { content:url(../a/img/n1.gif)' '; }
    .sidemenu-nav li {list-style-type:none; margin-left:0; line-height:2.6em; border-bottom:#cc9999 1px solid; }
    .sidemenu-nav ul {padding-left:0; margin-left:0;}
    li.extra-indent:before { content:url(../a/img/n2.gif)' ';}
    li.extra-indent {margin-left:0.9em;}
    .sidemenu-nav li a:link, a:visited { color: #0033cc; text-decoration: none;}
    .sidemenu-nav li a:hover, a:active { color: #af247c; text-decoration:underline;}
    .sidemenu-nav li:hover { background-color: #fcfcfc; }
    <ul class="sidemenu-nav">
    <li><a href="../books.php">Publications</a></li>
    <li class="extra-indent"><a href="../book1.php">BookName</a></li>
    <li><a href="../trustees.php">Trustees</a></li>
    </ul>

Answer 1

您不需要像使用实际图像那样在这里使用伪元素。

所需要的只是将图像用作链接的背景，并在左侧添加一些额外的填充。然后将链接设置为display:block，整个内容现在可以点击，因为图像是链接的部分。

   .sidemenu-nav {
     width: 15em;
     border-top: #cc9999 1px solid;
     padding-left: 0;
     font-size: 0.8em;
     margin-left: 25px;
   }
   .sidemenu-nav li a {
     padding-left: 10px;
     background-image: url(http://www.arshavidya.org.uk/a/img/n1.gif);
     background-repeat: no-repeat;
     background-position: center left;
     display: block;
   }
   .sidemenu-nav li {
     list-style-type: none;
     margin-left: 0;
     line-height: 2.6em;
     border-bottom: #cc9999 1px solid;
   }
   .sidemenu-nav ul {
     padding-left: 0;
     margin-left: 0;
   }
   li.extra-indent a {
     margin-left: 0.9em;
     background-image: url(http://www.arshavidya.org.uk/a/img/n2.gif);
   }
   .sidemenu-nav li a:link,
   a:visited {
     color: #0033cc;
     text-decoration: none;
   }
   .sidemenu-nav li a:hover,
   a:active {
     color: #af247c;
     text-decoration: underline;
   }
   .sidemenu-nav li:hover {
     background-color: #fcfcfc;
   }

<ul class="sidemenu-nav">
  <li><a href="../books.php">Publications</a>
  </li>
  <li class="extra-indent"><a href="../book1.php">BookName</a>
  </li>
  <li><a href="../trustees.php">Trustees</a>
  </li>
</ul>