I want to target the :after element when I hover over the #btn-home button.
#btn-home a {
display: inline-block;
color: #707070;
font-size: 1.15em;
font-weight: 600;
margin: 0 20px;
}
#btn-home {
position: relative;
display: inline-block;
margin: 0;
}
#btn-home a:after {
display: block;
position: absolute;
content: '';
margin: 0 auto;
height: 3px;
width: 25px;
background-color: red;
bottom: -7px;
left: 0;
right: 0;
}
<div id="btn-home">
HOME
</div>
I want to target the width of the :after element when hovered over #btn-home.
That is pretty easy to do. Just use the selector as #btn-home:hover a:after.
#btn-home a {
display: inline-block;
color: #707070;
font-size: 1.15em;
font-weight: 600;
margin: 0 20px;
}
#btn-home {
position: relative;
display: inline-block;
margin: 0;
}
#btn-home a:after {
display: block;
position: absolute;
content: '';
margin: 0 auto;
height: 3px;
width: 25px;
background-color: red;
bottom: -7px;
left: 0;
right: 0;
transition: all 1s ease; /* just for demo */
}
#btn-home:hover a:after{
width: 100px;
<div id="btn-home">
HOME
</div>
You need to add this in your code :
#btn-home a:after {
transition:all .4s linear;
}
#btn-home:hover a:after {
width: 50px;
}
#btn-home a {
display: inline-block;
color: #707070;
font-size: 1.15em;
font-weight: 600;
margin: 0 20px;
}
#btn-home {
position: relative;
display: inline-block;
margin: 0;
}
#btn-home a:after {
display: block;
position: absolute;
content: '';
margin: 0 auto;
height: 3px; width: 25px;
background-color: red;
bottom: -7px; left: 0; right: 0;
transition:all .4s linear;
}
#btn-home:hover a:after {
width: 50px;
}
<div id="btn-home">
HOME
</div>
Related
when you hover over the image blue arrow moves slowly. When you remove the cursor from the image white arrow comes back sharply. How to make a white arrow return slowly?
#keyframes left_to_right {
from {margin-left: -15px;}
to {margin-left: 0; }
}
div .footer-text{
position: absolute;
top: 10%;
left: 3%;
height: 20px;
width: 85%;
}
div .footer-text:after{
content: '';
background: url('https://www.nsartmuseum.ru/images/test/arrow-after-3.png') no-repeat;
width: 130px;
height: 15px;
display: inline-block;
margin-left: 10px;
position: relative;
}
div:hover .footer-text:before{
content: '';
background: url('https://www.nsartmuseum.ru/images/test/arrow-before-3.png') no-repeat;
width: 130px;
height: 15px;
margin-right: 5px;
display: inline-block;
animation: left_to_right 0.4s ease;
}
div:hover .footer-text:after{
content: '';
background: none;
}
div .footer-text span{
position: relative;
top:-5px;
font-size: 12px;
color: #313B78;
display: inline-block;
}
<div>
<a href="" class='footer-text'>
<span>13 September</span>
</a>
</div>
Obviously, there are ways to do this by CSS animation, but I've never used this in my development.
It's not required to use animation for that. transition is enough
just add transition: width .4s ease; to :after for unhovered element and play with width attribute
div .footer-text{
position: absolute;
top: 10%;
left: 3%;
height: 20px;
width: 85%;
}
div .footer-text span{
position: relative;
top:-5px;
font-size: 12px;
color: #313B78;
display: inline-block;
}
div .footer-text:after{
content: '';
background: url('https://www.nsartmuseum.ru/images/test/arrow-after-3.png') no-repeat right;
width: 130px;
height: 15px;
display: inline-block;
margin-left: 10px;
position: relative;
transition: width .4s ease;
}
div:hover .footer-text:after{
width: 0;
}
div .footer-text:before{
content: '';
background: url('https://www.nsartmuseum.ru/images/test/arrow-before-3.png') no-repeat right;
width: 0;
height: 15px;
margin-right: 5px;
display: inline-block;
transition: width .4s ease;
}
div:hover .footer-text:before{
width: 130px;
}
<div>
<a href="" class='footer-text'>
<span>13 September</span>
</a>
</div>
I do it:)
div {
width:50%;
position: relative;
height: 20px;
}
div .footer-text{
position: absolute;
top: 0;
left: 0;
line-height: 20px;
width: 100%;
height: 100%;
font-family: sans-serif;
overflow: hidden;
}
div .footer-text:before {
content: '';
background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%228%22%20height%3D%2215%22%20viewBox%3D%220%200%208%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%201.5l6%206-6%206%22%20stroke%3D%22%23C5C8D0%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E') no-repeat right center;
background-size: 8px;
width: 8px;
height: 15px;
position: absolute;
right: 0;
top: 50%;
transform: translate(0,-7px);
z-index: 2;
transition: .4s ease-in-out;
}
div .footer-text span {
position: absolute;
top: 0;
left: 0;
font-size: 12px;
color: #313B78;
display: block;
white-space: nowrap;
z-index: 1;
transition: .4s ease-in-out;
}
div .footer-text span:before {
content: '';
display: block;
width: 100vw;
height: 15px;
position: absolute;
top: 50%;
right: 100%;
margin: -7px 20px 0 0;
background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221110%22%20height%3D%2214%22%20viewBox%3D%220%200%201110%2014%22%3E%3Cpath%20fill%3D%22%23313B78%22%20d%3D%22M1109.424%206.076l-6-6a.599.599%200%2010-.848.848l4.975%204.976H1a.6.6%200%20100%201.2h1106.551l-4.975%204.976a.599.599%200%2010.848.848l6-6a.6.6%200%20000-.848z%22%2F%3E%3C%2Fsvg%3E') no-repeat right top;
background-size: auto 14px;
}
div .footer-text span:after {
content: '';
display: block;
width: 100vw;
height: 1px;
position: absolute;
top: 50%;
background: #C5C8D0;
left: calc(100% + 20px);
}
div .footer-text:hover:before {
transform: translate(20px,-7px);
}
div .footer-text:hover span {
left: 100%;
transform: translateX(-100%);
}
<div>
<a href="" class='footer-text'>
<span>13 September</span>
</a>
</div>
#keyframes left_to_right {
from {
margin-left: -15px;
}
to {
margin-left: 0;
}
}
div .footer-text {
position: absolute;
top: 10%;
left: 3%;
height: 20px;
width: 85%;
}
div .footer-text:after {
content: '';
background: url('https://www.nsartmuseum.ru/images/test/arrow-after-3.png') no-repeat;
width: 130px;
height: 15px;
display: inline-block;
margin-left: 10px;
position: relative;
animation: left_to_right 0.4s ease;
}
div:hover .footer-text:before {
content: '';
background: url('https://www.nsartmuseum.ru/images/test/arrow-before-3.png') no-repeat;
width: 130px;
height: 15px;
margin-right: 5px;
display: inline-block;
animation: left_to_right 0.4s ease;
}
div:hover .footer-text:after {
display: none;
}
div .footer-text span {
position: relative;
top: -5px;
font-size: 12px;
color: #313B78;
display: inline-block;
}
<div>
<a href="" class='footer-text'>
<span>13 September</span>
</a>
</div>
I am trying to make a switch button by using HTML elements. But I can't do animation for this. Here I have tried to use transition CSS3 property. The transition will work for some elements only and its doesn't work as expected for switch-group:before element. Is there any way to improve more animation to get an attractive one?. I have tried many links but this doesn't help with my code. I have attached code below,
input[type=checkbox] {
display: none;
}
.switch-wrapper {
position: relative;
width: 70px;
border: 1px solid;
cursor: pointer;
height: 22px;
overflow: hidden;
}
.switch-on,
.switch-off {
display: block;
width: 50%;
float: left;
height: 100%;
transition: 0.5s;
}
.switch-on {
background-color: red;
margin-left: -100%;
text-indent: -18px;
line-height: 21px;
text-align: center;
}
.switch-off {
text-indent: 18px;
line-height: 21px;
text-align: center;
background-color: aliceblue;
}
.switch-group:before {
display: block;
content: "";
position: absolute;
height: 18px;
width: 18px;
margin: 2px;
background-color: #1b191e;
top: 0px;
}
.switch-group {
display: block;
position: relative;
height: 23px;
width: 200%;
user-select: none;
}
input[type=checkbox]:checked+.switch-group .switch-on {
margin-left: 0;
}
input[type=checkbox]:checked+.switch-group:before {
right: 50%;
}
<div class="switch-wrapper">
<input type="checkbox" id="checked" />
<label class="switch-group" for="checked">
<span class="switch-on">ON</span>
<span class="switch-off">OFF</span>
</label>
</div>
The transition will not work in your :before pseudo element because you are changing the :before right value from auto(by default) to 0...transition does not works on auto values...
So try to use left:0 at start and then change it value on click(when input checked) using calc() and also use transtion:0.5s in :before to make it animate
input[type=checkbox] {
display: none;
}
.switch-wrapper {
position: relative;
width: 70px;
border: 1px solid;
cursor: pointer;
height: 22px;
overflow: hidden;
}
.switch-on,
.switch-off {
display: block;
width: 50%;
float: left;
height: 100%;
transition: 0.5s;
}
.switch-on {
background-color: red;
margin-left: -50%;
text-indent: -18px;
line-height: 21px;
text-align: center;
}
.switch-off {
text-indent: 18px;
line-height: 21px;
text-align: center;
background-color: aliceblue;
}
.switch-group:before {
display: block;
content: "";
position: absolute;
height: 18px;
width: 18px;
margin: 2px;
background-color: #1b191e;
top: 0px;
left: 0;
transition: 0.5s;
}
.switch-group {
display: block;
position: relative;
height: 23px;
width: 200%;
user-select: none;
}
input[type=checkbox]:checked+.switch-group .switch-on {
margin-left: 0;
}
input[type=checkbox]:checked+.switch-group:before {
left: calc(50% - 22px);
}
<div class="switch-wrapper">
<input type="checkbox" id="checked" />
<label class="switch-group" for="checked">
<span class="switch-on">ON</span>
<span class="switch-off">OFF</span>
</label>
</div>
Or if you want your code to work in more intuitive way, try to use opacity instead of margin.
I have changed some of your css a little bit
input[type=checkbox] {
display: none;
}
.switch-wrapper {
position: relative;
width: 70px;
border: 1px solid;
cursor: pointer;
height: 22px;
overflow: hidden;
}
.switch-on,
.switch-off {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: 0.5s;
padding: 2px 6px;
}
.switch-on {
background-color: red;
line-height: 21px;
opacity: 0;
}
.switch-off {
line-height: 21px;
background-color: aliceblue;
opacity: 1;
text-align: right;
}
.switch-group:before {
display: block;
content: "";
position: absolute;
height: 18px;
width: 18px;
margin: 2px;
background-color: #1b191e;
top: 0px;
left: 0;
transition: 0.5s;
z-index: 99;
}
.switch-group {
display: block;
position: relative;
height: 23px;
user-select: none;
}
input[type=checkbox]:checked+.switch-group .switch-on {
opacity: 1;
}
input[type=checkbox]:checked+.switch-group .switch-off {
opacity: 0;
}
input[type=checkbox]:checked+.switch-group:before {
left: calc(100% - 22px);
}
<div class="switch-wrapper">
<input type="checkbox" id="checked" />
<label class="switch-group" for="checked">
<span class="switch-on">ON</span>
<span class="switch-off">OFF</span>
</label>
</div>
Try this toggler
.onoffswitch {
position: relative; width: 48px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
height: 24px; padding: 0; line-height: 24px;
border: 2px solid #F1F1F5; border-radius: 24px;
background-color: #F1F1F5;
transition: background-color 0.3s ease-in;
}
.onoffswitch-label:before {
content: "";
display: block; width: 24px; margin: 0px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 22px;
border: 2px solid #F1F1F5; border-radius: 24px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
background-color: #2DC76D;
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
border-color: #2DC76D;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
right: 0px;
}
.onoffswitch-checkbox:checked + .onoffswitch-label span.switch-off {
opacity: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label span.switch-on{
opacity: 1;
}
span.switch-off {
opacity: 1;
float: right;
font-size: 12px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
span.switch-on {
position: absolute;
font-size: 12px;
top: 50%;
transform: translateY(-50%);
opacity: 0;
}
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="switch-on">ON</span>
<span class="switch-off">OFF</span></label>
</div>
You Can Try This.. Or visit This link For Details
.onoffswitch {
position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 6px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 56px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
I am making a navigation menu (following a tutorial), and to make the nav-icon I apparently have to use pseudo elements. Normally that would be fine, but this time, they wont show at all...
Is there something wrong with my code/is there a better way to make the icon?
*,
*::before,
*::after {
box-sizing: inherit;
padding: 0;
margin: 0;
}
body {
padding: 0;
margin: 0;
background-color: #FFF
-webkit-font-smoothing: antialiased;
}
a {
color: hsla(37, 39%, 72%, 1.00);
text-decoration: none;
}
li{
list-style: none;
}
.header {
width: 100vw;
height: 100vh;
display: block;
background:url(img/background.jpg) no-repeat center center;
background-size: cover;
position: relative;
}
.logo {
font-size: 4em;
color: #FFF;
line-height: 1.1;
border: 1px solid #fff;
border-radius: 100%;
width: 80px;
height: 80px;
display: inline-block;
padding: 5px;
background-color: hsla(152, 40%, 20%, 1.00);
margin: 50px 0 0 50px;
cursor: pointer;
}
.nav-icon {
width: 50px;
height: 40px;
display: block;
background-color: transparent;
position: absolute;
top: 70px;
right: 50px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
.nav-icon .icon {
width: 50px;
height: 2px;
display: block;
background-color: #333;
position: absolute;
top: 20px;
}
.nav-icon .icon::before
.nav-icon .icon::after {
content: "";
width: 50px;
height: 2px;
display: block;
background-color: #FFF
position: absolute;
height: 100%;
}
.nav-icon .icon::before {
top: -10px;
}
.nav-icon .icon::after {
top: 10px;
}
You have missed semicolon ; in some lines and comma , in
.nav-icon .icon::before ,
.nav-icon .icon::after {
content: "";
width: 50px;
height: 2px;
display: block;
background-color: #FFF
position: absolute;
height: 100%;
}
that fixes what u were looking for
Trying to make bars go on the left and right of my <h2> title.
#s-text h2 {
font-size: 2.25em;
font-weight: 700;
color: black;
margin-bottom: 20px;
padding: 0;
}
#s-text h2:after {
content: "";
position: absolute;
display: inline-block;
right: 0;
height: 10px;
width: 30px;
background-color: red;
}
#s-text h2:before {
content: "";
position: absolute;
display: inline-block;
left: 0;
height: 10px;
width: 30px;
background-color: red;
}
<div id="s-text">
<h2>Title 1</h2>
</div>
Is this what you're looking for?
#s-text {
text-align: center;
}
#s-text h2 {
font-size: 2.25em;
font-weight: 700;
color: black;
position: relative;
margin-bottom: 20px; padding: 0;
display: inline-block;
}
#s-text h2:after {
right:-1em;
}
#s-text h2:before {
left:-1em;
}
#s-text h2:before,
#s-text h2:after {
content: "";
position: absolute;
display: inline-block;
height: 10px; width: 30px;
background-color: red;
top: 50%;
transform: translateY(-50%);
}
<div id="s-text">
<h2>what is it</h2>
</div>
I want to get some practice with pseudo elements in combination with transitions and animations. But I have one little problem.
Have a look at this:
HTML:
<nav id="navBar" class="clearfix">
Test
</nav>
CSS:
.clearfix:after {
content: ".";
clear: both;
display: block;
visibility: hidden;
height: 0px;
}
#navBar {
width: 100%;
padding: 30px;
border-top: 1px solid #808080;
border-bottom: 1px solid #808080;
box-sizing: border-box;
}
#navBar a {
text-decoration: none;
display: inline-block;
}
a.nav {
padding: 10px;
background-color: #7492b6;
color: #fff;
float: left;
font-weight: bold;
font-size: 1em;
min-width: 150px;
text-align: center;
}
a.nav::before {
content: "";
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 3px;
background-color: #fff;
padding: 0;
}
a.nav::after {
content: "";
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 3px;
background-color: #fff;
padding: 0;
}
http://codepen.io/anon/pen/rVbeLa
the two red lines are my pseudo elements. But I want them to have width 100% but it's not working in combination with the padding.
It should look like this but then I have no padding :/
http://codepen.io/anon/pen/RPOaRj
I have tested it on Firefox 39 and Chrome 43, both on OSX yosemite. Result is the same on both.
Any Idea how this problem could be solved?
Cheers
You can fix that by doing this.
Add position:relative; to the <a>:
#navBar a {
text-decoration: none;
display: inline-block;
position:relative;
}
Then, change your :before and :after to position:absolute; and change their position from top and bottom:
.navGroup1 a.nav::before {
content: "";
display: block;
position: absolute;
top: 10px;
left: 0;
width:100%;
height: 3px;
background-color: red;
}
.navGroup1 a.nav::after {
content: "";
display: block;
position: absolute;
bottom:10px;
left: 0;
width: 100%;
height: 3px;
background-color: red;
}
Updated Codepen