2

I want to add a vertical line between the green blocks in the following image. I am using :after to do that. However I do not want to display the line after the last block. Is there any trick to do that?

enter image description here

CSS:

.block{
    width: 20px;
    height: 20px;
    margin-right: 20px;
    background: green;
    float: left;
}

.block:after {
  content: '';
  width: 0;
  height: 100%;
  position: absolute;
  border: 1px solid black;
  top: 0;
  left: 10px;
}

Demo: http://jsfiddle.net/rhwb7b2o/

Note: The height of the list items varies. HTML markup can be changed if required.

user1355300
  • 4,867
  • 18
  • 47
  • 71
  • Here is an answer that will help you: [stackoverflow][1] [1]: http://stackoverflow.com/questions/5449872/css-notlast-childafter-selector – kapantzak Nov 25 '14 at 14:11

2 Answers2

5

Add position:relative to the li elements so that each line does not cover the whole ul.

Then add li:last-child .block{position:relative;overflow:hidden;} to handle the last element.

Demo at http://jsfiddle.net/gaby/qj2dbdkz/

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • @user1355300: I updated your own JSFiddle http://jsfiddle.net/rhwb7b2o/1/ - To achieve the acquired effect of the ending portion of the line, you could also add a `li:last-child .block:after` with a defined height of 17px; – wes.hysell Nov 25 '14 at 14:18
0

Use the :not selector with the :last-child selector. Like this:

.block:not(:last-child):after { /* ... */ }
bzeaman
  • 1,128
  • 11
  • 28