时间戳

首页 > 解决方案 > CSS - 通过（下方）SVG 徽标图像添加细水平线

css - CSS - 通过（下方）SVG 徽标图像添加细水平线

问题描述

如何实现这样的水平线穿过（在它下面有情人z-index，所以它实际上通过图像不可见）SVG标志图像，但它不会接触侧面的图像，正如我们在这里看到的那样，线之间有间隙和图像的每一侧。已经尝试将图像容器设置为相对并在其上添加 ::before 伪类，将此细线设置为：

    &:before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            border-top: 1px solid $whiteColor;
            width: 100%;
            transform: translateY(-50%);
        }

但它通过 SVG 徽标并通过它可见。我想实现这一点：

在此处输入图像描述

标签： csslinehorizontal-scrollingstrikethrough

解决方案

尝试使用 &:before 和 &:after 伪类来实现这一点。例如，您可以使用：

&:before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        border-top: 1px solid $whiteColor;
        width: 40%;
        transform: translateY(-50%);
    }



&:after {
            content: '';
            position: absolute;
            top: 50%;
            right: 0;
            border-top: 1px solid $whiteColor;
            width: 40%;
            transform: translateY(-50%);
        }

不确定这是否可行，只是复制了您的示例并想向您展示逻辑:)

推荐阅读