CODEWITHSUNDEEP
css
nnn
nnn

Reputation: 9

How to include display:block in css code that includes pseudo element 'before'

I'm using the pseudo element :before in a side menu to incorporate an indented icon and text and wish to use display:block so that the links are easy to click. Adding .sidemenu-nav li a {display:block;} or slight variants of it just creates unwelcome line breaks. Can display:block be made to work or is there a better alternative?

    .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>

Upvotes: 1

Views: 99

Answers (1)

Paulie_D
Paulie_D

Reputation: 115099

You don't need to use a pseudo-element here as you are using an actual image.

All that is need is to use the image as a background to the link with a little extra padding on the left. Then set the link to display:block and the whole thing is now clickable as the image is part of the link.

   .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>

Upvotes: 1

Related Questions