CODEWITHSUNDEEP
csssvgsasspseudo-element
H1av0un
H1av0un

Reputation: 3

How to use :before with svg and left floating

I need to understand ho can I use pseudo element :before in this case. I have block with text and svg gradient, which needs to be floated on left side of this block. Problem is, that when I use :before on this whole block, i can see this svg part on top of my block and when i try to put it on left side, i can see nothing.

example of 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>

and there is my scss file:

.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;
}
}

I didnt find any solution how to put it on left side and be visible...

Thx for helping

Upvotes: 0

Views: 951

Answers (1)

Ovidiu Unguru
Ovidiu Unguru

Reputation: 756

You could put the SVG in the content:'';, but it's better to use background-image, that way you can resize the svg however you need.

https://jsfiddle.net/3wc2jt7t/

I wrapped the h2,p and a into a div so I can float them to the right and the SVG is floated to the left. Hope it helps!

Upvotes: 1

Related Questions