如何使用 :before 与 svg 并保持浮动

Question

我需要了解如何在这种情况下使用伪元素 :before 。我有带有文本和 svg 渐变的块，需要将其浮动在此块的左侧。问题是，当我在整个块上使用 :before 时，我可以在我的块顶部看到这个 svg 部分，而当我尝试将它放在左侧时，我什么也看不到。

html的例子：

<div class="slide__text">
                <h2 class="slide__heading">Heding</h2>
                <p class="slide__perex">Lorem ipsum is simply dumy text</p>
                <a href="" title="" class="btn slide__btn btn-warning">Lorem Ipsum</a>
                <a href="" title="" class="slide__cancel"><span class="icon icon-cancel"></span></a>
            </div>

还有我的 scss 文件：

.slide__text
{
overflow: auto;
text-align: left;
position: absolute;
display: block;
background: rgba(red($color-blue), green($color-blue), blue($color-blue), 
0.95);
padding: 40px 30px 30px 15px;
height: 230px;
top: 50%;
margin-top: -105px;
width: 220px;
right: 0;
&:before
{
    content: url("images/layout/news-background-left.svg");
    float: left;
    position: absolute;
}
}

我没有找到任何解决方案如何将它放在左侧并可见...

感谢您的帮助

Answer 1

您可以将 SVG 放在 content:''; 中，但最好使用 background-image，这样您就可以根据需要调整 svg 的大小。

https://jsfiddle.net/3wc2jt7t/

我将 h2,p and a 包装成 div 这样我就可以将它们浮动到右侧，而 SVG 则浮动到左侧。希望对您有所帮助！

如何使用 :before 与 svg 并保持浮动

How to use :before with svg and left floating

css

svg

sass

pseudo-element