Kevin Powell - Community•3mo ago

style for sub item

Hi guys,I'm have a sub item how can I create the style like this?

17 Replies

Socrates•3mo ago

I hope this helps you. 😀

emptyOP•3mo ago

I think It works. Thank you

.addOnItem {
        position: relative;
        &:first-child::before {
          top: 0;
        }

        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: -50%;
          height: 100%;
          width: 1px;
          background-color: #000;
        }

        &::after {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          height: 1px;
          width: 20px;
          background-color: #000;
        }
}

.addOnItem {
        position: relative;
        &:first-child::before {
          top: 0;
        }

        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: -50%;
          height: 100%;
          width: 1px;
          background-color: #000;
        }

        &::after {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          height: 1px;
          width: 20px;
          background-color: #000;
        }
}

Socrates•3mo ago

👍

emptyOP•3mo ago

It seems like the first after class is thicker than others. Do you know how to fix it ?

Chris Bolson•3mo ago

Can you share your code, along with the HTML and the rest of the styling for the list on codepen or something similar. That way it would be easier for someone to help you debug.

CodePen

Create a New Pen

...

capt_uhu•3mo ago

couldn't this just be a single pseudo with a left and bottom border?

Tok124 (CSS Nerd)•3mo ago

It could also be done with a gradient background

capt_uhu•3mo ago

on the size inconsistency sometimes if you go with .8px instead of 1px things will even out. This is what the browser does when you say ask for a border-width: 1px; if you check the computed panel in dev tools you'll see it actually renders at .8px. I have no idea why.

clevermissfox•3mo ago

Great tip; I’ve been defaulting to 2px just because 1px gets weird I didn’t think about going the other way

emptyOP•3mo ago

I try to check the computed panel on different browsers (firefox, chrome, edge) and I see it renders at 1px. However, you're right. When I set the height to .8px, all after element will even out. Thanks

capt_uhu•3mo ago

👍 , might be different depending on 2x, 3x etc monitors? Screen shot from my new-ish 2x laptop in Firefox:

capt_uhu•3mo ago

can confirm that on my old 1x monitor from 2008 that just won't die I get 1px computed at 1px

emptyOP•3mo ago

Hi guys, It's me again 😅. I wonder how to handle this case?

Chris Bolson•3mo ago

A bit "hacky" but I got something like this working by giving the "tree" items a class name and only applying the tree lines to those elements. The left-hand line of these items extends upwards way beyond the height of the element to allow for the different heights. This does however require that the parent element has overflow: hidden to prevent the line from flowing all the way up the page outside of the list container. https://codepen.io/cbolson/pen/XWvXYMB This is quite a common design pattern so I am sure that there is a more standard way of achieving this 🤔

Chris Bolson

CodePen

https://discord.com/channels/436251713830125568/1288699812484743231...

...

clevermissfox•3mo ago

If you need it to expand and collapse, I came across this https://codepen.io/AleksandrHovhannisyan/pen/PoaayLO

Aleksandr Hovhannisyan

CodePen

Expandable tree views in CSS (customizable parameters)

...

emptyOP•3mo ago

Thanks guy. I've done it 😅

Gaming

Programming

style for sub item