الوصول إلى لون الفئة في SCSS

الدعم
5

@tjot،

من الممكن القيام بحيلة CSS باستخدام حدود العنصر الزائف ::after للحصول على التأثير الذي تريده.

.category-list tbody .category {
    border-left: none;
    position: relative;
    padding-left: 50px;

    > h3:first-child {
        border-width: 0;
        border-style: solid;
        border-color: inherit;

        &::after {
            content: "";
            width: 0px;
            height: 70%;
            position: absolute;
            border-radius: 20px;
            border-width: 10px;
            border-style: solid;
            border-color: inherit;
            top: 50%;
            transform: translateY(-50%);
            left: 10px;
        }
    }
}

image
image1080×738 130 KB

لاحظ أنني طبقت النمط مباشرة على عنصر h3 الخاص بالعنوان لأنه ابن مباشر لـ td الذي تم تطبيق النمط المضمن عليه. لذا، إذا تخلص القالب منه في أي وقت، فسيتعين عليك تعديل CSS الخاص بك.

ولكن يمكنك تخطي تجاوز components/parent-category-row كما أردت.