Changing a property of :after element for small devices [duplicate]
This question already has an answer here:
How to use particular CSS styles based on screen size / device
4 answers
I want to change the height of the underline link effect to adapt to different viewports , here is my css.
a,a:visited,a:hover,a:active{
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
position:relative;
transition:0.5s color ease;
text-decoration:none;
}
a.after:after{
content: "";
transition:0.5s all ease;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
position:absolute;
}
a.after:after{
bottom:-0.03em;
height:0.15em;
width:0;
background:#d73444;
}
a:after{
left:50.3%;
-webkit-transform:translateX(-50%);
transform:translateX(-50%);
}
a.after:hover:after{
width: 100%;
}
So i want to change a.after:after (height) for different resolutions somehow , is there any way to do that with css or jquery , is there any library that i can use to make it work ?
jquery css media-queries
asked Nov 24 '18 at 16:02
Mostafa TaherMostafa Taher
62
marked as duplicate by Heretic Monkey, Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 24 '18 at 19:16
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
This question already has an answer here:
How to use particular CSS styles based on screen size / device
4 answers
I want to change the height of the underline link effect to adapt to different viewports , here is my css.
a,a:visited,a:hover,a:active{
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
position:relative;
transition:0.5s color ease;
text-decoration:none;
}
a.after:after{
content: "";
transition:0.5s all ease;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
position:absolute;
}
a.after:after{
bottom:-0.03em;
height:0.15em;
width:0;
background:#d73444;
}
a:after{
left:50.3%;
-webkit-transform:translateX(-50%);
transform:translateX(-50%);
}
a.after:hover:after{
width: 100%;
}
So i want to change a.after:after (height) for different resolutions somehow , is there any way to do that with css or jquery , is there any library that i can use to make it work ?
jquery css media-queries
asked Nov 24 '18 at 16:02
Mostafa TaherMostafa Taher
62
marked as duplicate by Heretic Monkey, Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 24 '18 at 19:16
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
This question already has an answer here:
How to use particular CSS styles based on screen size / device
4 answers
I want to change the height of the underline link effect to adapt to different viewports , here is my css.
a,a:visited,a:hover,a:active{
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
position:relative;
transition:0.5s color ease;
text-decoration:none;
}
a.after:after{
content: "";
transition:0.5s all ease;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
position:absolute;
}
a.after:after{
bottom:-0.03em;
height:0.15em;
width:0;
background:#d73444;
}
a:after{
left:50.3%;
-webkit-transform:translateX(-50%);
transform:translateX(-50%);
}
a.after:hover:after{
width: 100%;
}
So i want to change a.after:after (height) for different resolutions somehow , is there any way to do that with css or jquery , is there any library that i can use to make it work ?
jquery css media-queries
asked Nov 24 '18 at 16:02
Mostafa TaherMostafa Taher
62
This question already has an answer here:
How to use particular CSS styles based on screen size / device
4 answers
I want to change the height of the underline link effect to adapt to different viewports , here is my css.
a,a:visited,a:hover,a:active{
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
position:relative;
transition:0.5s color ease;
text-decoration:none;
}
a.after:after{
content: "";
transition:0.5s all ease;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
position:absolute;
}
a.after:after{
bottom:-0.03em;
height:0.15em;
width:0;
background:#d73444;
}
a:after{
left:50.3%;
-webkit-transform:translateX(-50%);
transform:translateX(-50%);
}
a.after:hover:after{
width: 100%;
}
So i want to change a.after:after (height) for different resolutions somehow , is there any way to do that with css or jquery , is there any library that i can use to make it work ?
This question already has an answer here:
How to use particular CSS styles based on screen size / device
4 answers
jquery css media-queries
jquery css media-queries
asked Nov 24 '18 at 16:02
Mostafa TaherMostafa Taher
62
asked Nov 24 '18 at 16:02
Mostafa TaherMostafa Taher
62
asked Nov 24 '18 at 16:02
Mostafa TaherMostafa Taher
62
asked Nov 24 '18 at 16:02
Mostafa TaherMostafa Taher
62
asked Nov 24 '18 at 16:02
Mostafa TaherMostafa Taher
62
62
marked as duplicate by Heretic Monkey, Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 24 '18 at 19:16
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Heretic Monkey, Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 24 '18 at 19:16
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
CSS3 media queries are used for this exact purpose.
For example, since you want to change the height in a.after:after you can do something like:
@media (max-width: 400px){
a.after:after {
height: 1em;
}
}
What this will do is it will replace any current styles you already have for that element with the styles inside of the brackets so long as the width of the viewport is not greater than 400px. Once it is greater than 400px those styles will no longer be applied.
answered Nov 24 '18 at 18:15
Christian LopezChristian Lopez
1189
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
CSS3 media queries are used for this exact purpose.
For example, since you want to change the height in a.after:after you can do something like:
@media (max-width: 400px){
a.after:after {
height: 1em;
}
}
What this will do is it will replace any current styles you already have for that element with the styles inside of the brackets so long as the width of the viewport is not greater than 400px. Once it is greater than 400px those styles will no longer be applied.
answered Nov 24 '18 at 18:15
Christian LopezChristian Lopez
1189
add a comment |
CSS3 media queries are used for this exact purpose.
For example, since you want to change the height in a.after:after you can do something like:
@media (max-width: 400px){
a.after:after {
height: 1em;
}
}
What this will do is it will replace any current styles you already have for that element with the styles inside of the brackets so long as the width of the viewport is not greater than 400px. Once it is greater than 400px those styles will no longer be applied.
answered Nov 24 '18 at 18:15
Christian LopezChristian Lopez
1189
add a comment |
CSS3 media queries are used for this exact purpose.
For example, since you want to change the height in a.after:after you can do something like:
@media (max-width: 400px){
a.after:after {
height: 1em;
}
}
What this will do is it will replace any current styles you already have for that element with the styles inside of the brackets so long as the width of the viewport is not greater than 400px. Once it is greater than 400px those styles will no longer be applied.
answered Nov 24 '18 at 18:15
Christian LopezChristian Lopez
1189
CSS3 media queries are used for this exact purpose.
For example, since you want to change the height in a.after:after you can do something like:
@media (max-width: 400px){
a.after:after {
height: 1em;
}
}
What this will do is it will replace any current styles you already have for that element with the styles inside of the brackets so long as the width of the viewport is not greater than 400px. Once it is greater than 400px those styles will no longer be applied.
answered Nov 24 '18 at 18:15
Christian LopezChristian Lopez
1189
answered Nov 24 '18 at 18:15
Christian LopezChristian Lopez
1189
answered Nov 24 '18 at 18:15
Christian LopezChristian Lopez
1189
answered Nov 24 '18 at 18:15
Christian LopezChristian Lopez
1189
1189
add a comment |
add a comment |
