
Draw a horizontal tree using CSS pseudo elements - igauravsehrawat
https://igauravsehrawat.github.io/draw-a-horizontal-tree-using-css-pseduo-elements
======
twooster
This is really cool. Yet, somehow, as cool as it is, I find it terribly
depressing. In comparison to other "look what I can do" projects -- such code
golf, or demo programming, or quines -- which achieve impressive results in a
constrained environment because it's challenging, thousands of programmers
have HAD to do silly things in CSS because there's no other choice. These
amazing-yet-hacky solutions get copy-pasted down through the generations and
what should be simple becomes enshrined in the arcane. I look at this and
become exhausted in empathy.

So in contrast to the opening line of the article, CSS is not amazing:
people's talent for threading camels through the eyes of needles is amazing.
Props to this guy for this. May I never have to recreate it.

~~~
hacker_9
Not sure what point you are making here, but one of the nice things about
modern browsers is you can write CSS and see the page update in real time.
This is likely where a lot of OPs code came from, that might look confusing if
you take it at face value only.

Whenever I'm faced with a CSS problem, it's usually just a case of toggling
on/off CSS in the DevTools to find the offender.

~~~
LoSboccacc
lucky you, whenever I face a css problem, it's usually the Safari/iOS engine
doing something stupid with the browser chroma and requiring dozen hops to
work around.

------
gurgus
Very cool writeup. I love posts like this that cover random things like this.
I'm definitely going to take this away and mess around with it!

------
ChrisSD
It's amusing that both this and "SVG can do that?"[1] are on the front page
right now. Is it better to draw using HTML/CSS or SVG? I guess the answer is
complicated.

[1]
[https://news.ycombinator.com/item?id=15023766](https://news.ycombinator.com/item?id=15023766)

~~~
hacker_9
SVG can work very well, an example project is Google Blockly [1].

[1]
[https://developers.google.com/blockly/](https://developers.google.com/blockly/)

~~~
Kagerjay
is this the same thing MIT scratch uses?

~~~
hacker_9
From the docs [1]:

 _" Scratch Blocks [2]: Designed by the people behind MIT's Scratch and built
on the Blockly code base, Scratch Blocks offers a simplified programming model
ideal for young learners."_

[1]
[https://developers.google.com/blockly/guides/overview](https://developers.google.com/blockly/guides/overview)

[2] [https://scratch.mit.edu/developers](https://scratch.mit.edu/developers)

------
thinkMOAR
By the title I thought it was a tree 'tree', with leaves and branches :) those
you can find in a forest.

Though nice howto nonetheless :)

~~~
tobijkl
There is also this kind of forest:
[http://mathworld.wolfram.com/Forest.html](http://mathworld.wolfram.com/Forest.html)

