Agafada Em Agafada Em - 6 months ago 48
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

, 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
element, absolutely position it, and make it half the length, so the
will look nice, but it seems that its not possible to have an
on a
.some_class + .some_class


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%;


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


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