CODEWITHSUNDEEP
cssflexboxhtml-lists
Alex Masters
Alex Masters

Reputation: 45

CSS-only reverse (un)ordered list

Plugin I'm using outputs links/descriptions as list items. If possible, I'd like to reverse the order (so first li appears last on the page) but also have them appear across two columns in masonry-esque (vs grid) fashion?

Existing code I have is:

.post-entry #linkcat-0 ul {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em; }

.post-entry #linkcat-0 ul li {
display: inline-block;
margin: 0;
border: 0;
padding: 10px 0;
border-bottom: 1px dotted #999; }

.post-entry #linkcat-0 ul li:last-child {
border-bottom: 0; }

Flex was introduced after I stopped dabbling, so I can't seem to get the two to work together. If anyone might be able to offer any insight, that would be very much appreciated.

In action: https://jsfiddle.net/z97xgp4k/

Upvotes: 1

Views: 47

Answers (1)

Jakub A Suplicki
Jakub A Suplicki

Reputation: 4801

I am not sure if that is exactly how you wanted it to look like but I believe that is relatively close.

That is the code I ended up with:

.post-entry #linkcat-0 ul {
    columns: 2;
    transform: rotate(180deg);
} 
.post-entry #linkcat-0 ul li {
  transform: rotate(-180deg);
  margin: 0;
  border: 0;
  padding: 10px 10px;
  border-bottom: 1px dotted #999;
}

You can see how it looks here.

Hope it helps.

Upvotes: 1

Related Questions