Adding bracket lines via CSS or HTML to existing interactive tournament bracket

Question

Been using this codepen (https://codepen.io/meredithz/pen/VYadPy) to build out a tournament bracket live on my site. Struggling to find a useful solution to add lines like a normal bracket has (i.e. two feed into the next match, etc.).

I tried experimenting with some pseudo elements like ::after like this:

bracket-matchup::after {
    content: "";
    border-width: 2px 2px 0 0;
    border-bottom: 2px solid transparent;
    border-radius: 0 2px 0 0;
}

but have struggled to make much progress there, any ideas?

Answer 1

You can "experiment" with something like this. It may not fully solve the problem but, it is a step in the right direction.

.bracket-level {
    position: relative;
}
.bracket-level::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: red;
}