Kevin Powell - Community•4w ago

style for sub item

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

17 Replies

Socrates•4w ago

I hope this helps you. 😀

empty•4w 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•4w ago

👍

empty•4w ago

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

Chris Bolson•4w 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•4w ago

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

Tok124 (CSS Nerd)•4w ago

It could also be done with a gradient background

capt_uhu•4w 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•4w ago

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

empty•4w 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•4w ago

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

capt_uhu•4w ago

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

empty•3w ago

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

Chris Bolson•3w 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•3w 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)

...

empty•3w ago

Thanks guy. I've done it 😅

Gaming

Programming

style for sub item