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

Question

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>

It's not really clear to me what you are trying to do. If you're using an image why not just make it a background image of the link? — Paulie_D
– Paulie_D, Commented Jan 7, 2016 at 12:21
Thanks for the correction re pseudo. I'm using an indented icon and link within a menu. I don't see how that can be coded as a background image. If you wish to see it in action, visit www.arshavidya.org.uk/aboutus.php and look at the side menu. — nnn
– nnn, Commented Jan 7, 2016 at 12:21

Paulie_D · Accepted Answer · 2016-01-07 12:37:52Z

1

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>

answered Jan 7, 2016 at 12:37

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Paulie_D Over a year ago

Happy to help. If this helped please consider upvoting &/or marking as the selected answer when permitted....it's customary. And welcome to Stack Overflow.

nnn Over a year ago

Very glad to up vote and/or mark as the selected answer, but I don't see any means of doing so. Where can I find that, please? Is there a tick box I've missed or ...?

Paulie_D Over a year ago

I believe that the 'Accepted' option only becomes available after a delay. 15 minutes I think.

nnn Over a year ago

Adding li.extra-indent { margin-left: 0.9em;} as a separate line in the css indents the rules as well as the sub-heading, which is preferable for me.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related