Agafada Em Agafada Em - 11 days ago 7
CSS Question

Border between elements, that is half the height of the element

I am trying to create borders between elements by using the siblings selector and having a

border-left
, but the border's length equals to the height of the element, which is not quite what I wanted.

I figured one can add an
:after
element, absolutely position it, and make it half the length, so the
border-left
will look nice, but it seems that its not possible to have an
:after
on a
.some_class + .some_class
?

Answer

If I understood well, you want something like this?

/*
 * Base styles, just for the sake of appearance.
 *
 * You can safely skip to the second half of the CSS.
 */

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

ul li {
  float: left;
  background: #ddd;
  color: #333;
  padding: 10px;
}


/*
 * This is the important part.
 */

ul li + li {
  position: relative;
}

ul li + li:after {
  position: absolute;
  content: '';

  /* Border color. */
  background: #999;

  /* Border dimensions. */
  height: 50%;
  width: 1px;

  /* Border position. */
  left: 0;
  top: 25%;
}
<ul>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
  <li>Sit</li>
  <li>Amet</li>
</ul>


Explanation

Simplified TL;DR: The position: relative; causes any position: absolute; inside it to be positioned from the edges of the element with position: relative;, instead of <body>.

(JSFiddle)


I think it's easier to understand the difference if you see it yourself. Since I'm too lazy to write a wall of text, take a look at these two images (source):

position absolute position relative