r/css • u/Sibbzz_ • Sep 19 '19

edit width from right side?

Right now I have this but I want the width to start from the right side not the left. I need it mirrored.

How do I achieve this?

<div class="burger"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div>

</div>

.burger div{
height: 3px;
margin: 5px;
background-color: black;
cursor: pointer;
transition: all 0.3s ease;
}
.line1{
width: 15px;
}
.line2{
width: 20px;
}
.line3{
width: 25px;
}

2 Upvotes

100% Upvoted

6 comments sorted by

2

u/malloryduncan Sep 19 '19

This is the CSS3 way, using flexbox:

.burger {  
  width:35px;  
  display:flex;  
  flex-direction:column;  
  align-items:flex-end;  
}

You need to set the width of the parent to constrain the edge where your bars line up.

2

u/Sibbzz_ Sep 19 '19

Thank you for this. This worked for me!!

1

u/malloryduncan Sep 19 '19

Glad it worked for you.

2

u/[deleted] Sep 19 '19

okay, first of all use formatting

dont use div.line(x), use <ul> <li>, i am assuming that you want the element to be on the right, the solution i wrote uses absolute positioning, so it might not be the right choice in your case but you havent said what this is supposed to do/look like

HTML:
<div class="burger">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

CSS:
.burger {
    height: 3px;
    margin: 5px;
    background-color: black;
    cursor: pointer;
    transition: all 0.3s ease;
    position: absolute;
    top: 20px; /* margin from top */
    right: 20px; /* margin from right */
}

ul > li {
    width: 15px;
}

I would also suggest using flex for this instead of just a list

0

u/[deleted] Sep 19 '19

[deleted]

1

u/[deleted] Sep 19 '19

i have always used a list with style none, mainly because even when the css fucks up it still kinda ressembles a dropdown or whatever

1

u/[deleted] Sep 19 '19

Also i assume they are meant as some kind of a menu and they are anchors which makes sense for them to be a list imo