How can I make a :before element change go from right to left instead of left to right?
This codepen shows link 1 and 3 hover changes are as expected, but the center link 2 I can’t get to spread evenly both sides left and right and so the text stays center. Must be because of the margin-left on link 2 in absolute position…
I’ve tried making the inner-wrap flex and making
link 1 align-content:flex-start
link 2 align-content:center
link 3 align-content:flex-end
but no joy
One option would be to do this:
#link2{
position:absolute;
left:50%;
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-ms-transform:translateX(-50%);
-o-transform:translateX(-50%);
transform:translateX(-50%);
}
Thanks ralph, that does the trick nicely
Going back to this…How on earth can I change the height whilst keeping the inline-block text and h4 in the inner-wrap container?
For now I’ll cheat with an absolute background - but would be good to know how and why those elements are not staying in the container… they’re relative to the parent, so I don’t get it
Hi,
You may need to clarify the question as I’m not quite sure what you mean?
Link2 is absolute and #link3 is floated so they are both removed from the flow but your #link1 is static and should hold the parent open.
It looks as though you have set heights that don’t match and I wonder if you just wanted to remove heights?
e.g.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#wrap {
display:block;
width:100%;
}
#inner-wrap {
display:block;
position:relative;
width:80%;
border:1px solid #000;
margin-left:auto;
margin-right:auto;
background:red;
}
.link {
display:inline-block;
position:relative;
width:auto;
max-width:45%;
padding:3px 10px;
border:1px solid #000;
cursor:pointer;
}
#link1 {
padding-left:30px;
}
#link2 {
position:absolute;
left:50%;
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-ms-transform:translateX(-50%);
-o-transform:translateX(-50%);
transform:translateX(-50%);
}
#link3 {
float:right;
padding-right:30px;
}
#back-arrow {
position:absolute;
margin:30px 0 0 -6px;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 6px 6px 0;
border-color: transparent #8B0D10 transparent transparent;
}
#forward-arrow {
position:absolute;
right:0;
margin:30px 24px 0 0;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0px 6px 6px;
border-color: transparent #8B0D10 transparent transparent;
}
.dir-txt {
display:inline-block;
position:relative;
overflow:hidden;
letter-spacing:2px;
color:#000;
padding:0 10px;
}
h4:before {
display: inline-block;
margin: 14px 2px 8px 0;
height: 2px;
content: " ";
text-shadow: none;
background-color: #8B0D10;
width: 5px;
-moz-transition: 1s ease-in-out;
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
-ms-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
h4:after {
display: inline-block;
margin: 14px 0 8px 2px;
height: 2px;
content: " ";
text-shadow: none;
background-color: #8B0D10;
width: 5px;
-moz-transition: 1s ease-in-out;
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
-ms-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#link1 h4:hover:after {
width:145px;
}
#link2 h4:hover:after, #link2 h4:hover:before {
width:145px;
}
#link3 h4:hover:before {
width:145px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="inner-wrap">
<div id="link1" class="link">
<div id="back-arrow"></div>
<h4><span class ="dir-txt">Link1</span></h4>
</div>
<div id="link2" class="link">
<h4><span class ="dir-txt">Link2</span></h4>
</div>
<div id="link3" class="link">
<div id="forward-arrow"></div>
<h4><span class ="dir-txt">Link3</span></h4>
</div>
</div>
</div>
</body>
</html>
Well with no heights set the .link containers were too high. So I set a height to the wrap and a height to the container. The problem is that the text and h4 lines don’t stay in the .link container, as can be seen in codepen.
The reason I asked you to clarify was that I didn’t understand what you were after and your answer just directs me back to the codepen which again I don’t know if the display I see is what you wanted or if you were after some other effect.
The text and h4 are inside the link container but I assume you are talking visually rather than from a code point of view. The heights you set I assumed were so that the link text could sit outside the lines you had drawn. If you remove the heights as already mentioned then the text will fall inside the lines you had drawn. To reduce the height of the lines further then remove the default top and bottom margins from the h4.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#wrap {
display:block;
width:100%;
}
#inner-wrap {
display:block;
position:relative;
width:80%;
border:1px solid #000;
margin-left:auto;
margin-right:auto;
background:red;
}
.link {
display:inline-block;
position:relative;
width:auto;
max-width:45%;
padding:3px 10px;
border:1px solid #000;
cursor:pointer;
}
#link1 {
padding-left:30px;
}
#link2 {
position:absolute;
left:50%;
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-ms-transform:translateX(-50%);
-o-transform:translateX(-50%);
transform:translateX(-50%);
}
#link3 {
float:right;
padding-right:30px;
}
#back-arrow {
position:absolute;
margin:9px 0 0 -6px;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 6px 6px 0;
border-color: transparent #8B0D10 transparent transparent;
}
#forward-arrow {
position:absolute;
right:0;
margin:9px 24px 0 0;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0px 6px 6px;
border-color: transparent transparent transparent #8B0D10;
}
.dir-txt {
display:inline-block;
position:relative;
overflow:hidden;
letter-spacing:2px;
color:#000;
padding:0 10px;
}
h4:before {
display: inline-block;
margin: 14px 2px 8px 0;
height: 2px;
content: " ";
text-shadow: none;
background-color: #8B0D10;
width: 5px;
-moz-transition: 1s ease-in-out;
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
-ms-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
h4:after {
display: inline-block;
margin: 14px 0 8px 2px;
height: 2px;
content: " ";
text-shadow: none;
background-color: #8B0D10;
width: 5px;
-moz-transition: 1s ease-in-out;
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
-ms-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#link1 h4:hover:after {
width:145px;
}
#link2 h4:hover:after, #link2 h4:hover:before {
width:145px;
}
#link3 h4:hover:before {
width:145px;
}
h4{margin:0}
</style>
</head>
<body>
<div id="wrap">
<div id="inner-wrap">
<div id="link1" class="link">
<div id="back-arrow"></div>
<h4><span class ="dir-txt">Link1</span></h4>
</div>
<div id="link2" class="link">
<h4><span class ="dir-txt">Link2</span></h4>
</div>
<div id="link3" class="link">
<div id="forward-arrow"></div>
<h4><span class ="dir-txt">Link3</span></h4>
</div>
</div>
</div>
</body>
</html>
You should avoid setting height on elements like this anyway unless there is a specific reason for you to do so.
I am still unsure though if this is what you were trying to do.
Suppose I could’ve explained a little better!
Yeah, visually, the top/bottom padding/margin on the link container is too much. I’ve removed heights and h4 and .link padding and margins, but still the container is too high.
codepen updated
The height of the links is mainly the top and bottom margins on the h4 as I mentioned above.
h4{margin:0}
What other height do you need reduced?
Ooops I applied the 0 margin to h4:before & after - that’s why I wasn’t seeing the change.
Sorry, and thanks again!
Any way to stop the transition shake of text in link2?
The transformation combined with the translate causes the position to be recalculated resulting in there being a pixel difference at odd pixel widths hence the shake.
If you position the left and right instead of the centre one you should avoid the shake.
e.g.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#wrap {
display:block;
width:100%;
}
#inner-wrap {
display:block;
position:relative;
width:80%;
border:1px solid #000;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.link {
display:inline-block;
position:relative;
width:auto;
max-width:45%;
padding:3px 10px;
border:1px solid #000;
cursor:pointer;
}
#link1 {
padding-left:30px;
position:absolute;
left:0;
top:0;
}
#link2 {
display:inline-block;
/*-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-ms-transform:translateX(-50%);
-o-transform:translateX(-50%);
transform:translateX(-50%);*/
}
#link3 {
position:absolute;
right:0;
top:0;
padding-right:30px;
}
#back-arrow {
position:absolute;
margin:9px 0 0 -6px;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 6px 6px 0;
border-color: transparent #8B0D10 transparent transparent;
}
#forward-arrow {
position:absolute;
right:0;
margin:9px 24px 0 0;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0px 6px 6px;
border-color: transparent transparent transparent #8B0D10;
}
.dir-txt {
display:inline-block;
position:relative;
overflow:hidden;
letter-spacing:2px;
color:#000;
padding:0 10px;
}
h4:before {
display: inline-block;
margin: 14px 2px 8px 0;
height: 2px;
content: " ";
text-shadow: none;
background-color: #8B0D10;
width: 5px;
-moz-transition: 1s ease-in-out;
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
-ms-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
h4:after {
display: inline-block;
margin: 14px 0 8px 2px;
height: 2px;
content: " ";
text-shadow: none;
background-color: #8B0D10;
width: 5px;
-moz-transition: 1s ease-in-out;
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
-ms-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#link1 h4:hover:after {
width:145px;
}
#link2 h4:hover:after, #link2 h4:hover:before {
width:145px;
}
#link3 h4:hover:before {
width:145px;
}
h4{margin:0}
</style>
</head>
<body>
<div id="wrap">
<div id="inner-wrap">
<div id="link1" class="link">
<div id="back-arrow"></div>
<h4><span class ="dir-txt">Link1</span></h4>
</div>
<div id="link2" class="link">
<h4><span class ="dir-txt">Link2</span></h4>
</div>
<div id="link3" class="link">
<div id="forward-arrow"></div>
<h4><span class ="dir-txt">Link3</span></h4>
</div>
</div>
</div>
</body>
</html
Indeed it does take away the shaking, but I’m back to the initial problem of the center link only expanding to the right…prob due to the margin-left I had to apply to center it…
No biggy, I can put up with the shaking
Thanks again 
Where does that happen on the code I posted ?
If I make link1 & link3 absolute with link2 inline-block, link2 won’t be center aligned. And if I apply a margin to link 2 to make it center aligned, it won’t expand to the left 
I’ll say it again 
Where in my code example does that happen?
Cheat! Dunno where I went wrong, but link2 didn’t go center… will have to check back over 
The text-align:center on .inner-wrap centres the inline-block element
shaking my fists!
Thanks thanks
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.