Is there an easy way to remove an ::after pseudo element inside of a media query?
For example can I completely remove this ::after pseudo element when the browser width falls below 980px? Or should I do it the old fashioned way and hide the original class and display a new class when the browser width shrinks below 980px? How would a professional solve this?
.navigation_unit > a::after {
content: "";
position: absolute;
box-sizing: border-box;
width: 100%;
height: .0625rem;
bottom: 0;
left: 0;
background-color: rgb(0,0,238);
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
The easiest option is to set the pseudo element's content property value to none inside of the media query. In doing so, the pseudo element won't be rendered.
#media (max-width: 600px) {
.navigation_unit > a::after {
content: none;
}
}
As stated by the relevant specification, the values none or normal would result in the pseudo element no being generated.
12.2 The 'content' property
none - The pseudo-element is not generated.
normal - Computes to none for the :before and :after pseudo-elements.
Here is a basic example demonstrating this:
p::before {
content: 'Psuedo-element... ';
color: #f00;
}
#media (max-width: 600px) {
p::before {
content: none;
}
}
<p>Resize this window to less than 600px</p>
Easy enough mobile-first solution:
.navigation_unit a:after {
...
/* everything except content: '' */
}
#media (min-width:980px) {
.navigation_unit > a:after {
content: '';
}
}
Related
My problem is that when the class is-sticky is added to my menu, my ::before and ::after on logo are not necessary anymore. I'm not the biggest hero with Jquery and can't fix it with a online search.
the div
<div id='Top_bar' class='is-sticky'>
<div class='container>
<div class='top_bar_left>
::before
<div class='logo>
::after
</div>
</div>
</div>
</div>
My scss
.logo {
background: #1A2741;
padding: 0 50px;
width: 13%;
margin: 0 !important;
#logo {
margin-left: 39%;
}
&::before {
content: ' ';
background-image: url(../uploads/RH-Beelmerk.svg);
height: 100px;
width: 50px;
position: absolute;
padding: 50px;
z-index: 2;
top: -85%;
left: 1%;
transition: top 2s;
}
&:hover::before {
top: -50%;
}
&::after {
content: '';
background: #1A2741;
height: 110px;
width: 50px;
display: block;
transform: rotate(10deg);
position: absolute;
left: 15.5%;
top: -6%;
z-index: 0;
border-right: solid 4px #FF8496;
}
}
You can either unset their content (content: unset;) or turn off their display (display: none).
For instance, here's unsetting the content (which was originally posted as an answer by doğukan but then deleted for some reason; since this answer was accepted, I've added that here and marked the post Community Wiki):
.is-sticky::before, .is-sticky::after {
content: unset;
}
Depending on the selector adding them, you may need to make that more specific, but that's the general idea.
Example:
setInterval(() => {
document.querySelector(".target").classList.toggle("is-sticky");
}, 800);
.target::before {
content: 'before';
}
.target::after {
content: 'after';
}
.is-sticky::before, .is-sticky::after {
content: unset;
}
<div class="target"> text </div>
Or turning the display of the content off instead:
.is-sticky::before, .is-sticky::after {
display: none;
}
Example:
setInterval(() => {
document.querySelector(".target").classList.toggle("is-sticky");
}, 800);
.target::before {
content: 'before';
}
.target::after {
content: 'after';
}
.is-sticky::before, .is-sticky::after {
display: none;
}
<div class="target"> text </div>
Put the condition with 'is-sticky' and unset the :before and :after children. Then you can just toggle the 'is-sticky' class on the logo. And keep in mind that :before and :after are children of your class-element, not elements outside of your class-element.
.logo{
&.is-sticky{
&:before, &:after{
content: none;
}
}
}
How about using the CSS :not test, that way you don't get the pseudo elements if is-sticky is set.
See MDN:
The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.
e.g. &:not('.is-sticky')::after instead of &::after
That way you don't need any extra entries in the CSS.
As a part of my study project, I need to change the background of a single word ("adventure") inside a paragraph. I'm not allowed to change HTML code, can use CSS only.
<p class="section_text">
Welcome to adventure!
</p>
The only idea I have is to set a background to a pseudo-element ::after and play with position relative/absolute, but it doesn't feel right.
.section_text {
position: relative; }
.section_text::after {
content: "adventure";
background-color: #04128f;
color: #0f0;
width: 65px;
height: 20px;
position: absolute;
top: 0;
left: 90px; }
Are there any smart ways to do that (it should work in the last version of Chrome)?
P.S. Can not use JS or jQuery neither. Exclamation sign background shouldn't be changed.
Set an intrinsic font-size to the :root selector. ex. :root {font-size: 5vw}. This makes the font responsive to viewport width.
Make the background of <p> the highlight color (ex red) and set its width: max-content.
Next <p> needs position: relative and then z-index: -1
Add two pseudo elements to <p>
p::before {content: 'Welcome to';...}
/*and*/
p::after {content: '!';...}
Assign position: absolute, z-index: 1, and background: white
Finally set right: 0to p::after so the exclamation mark is always at the very end
Note: the property/value content: 'Welcome to\a0'; on p::before selector has \a0 at the end. This is the CSS entity code for a non-breaking space (HTML entity: )
:root {
font: 400 5vw/1 Consolas
}
p {
position: relative;
width: max-content;
z-index: -1;
background: red;
}
p::before {
position: absolute;
content: 'Welcome to\a0';
background: white;
z-index: 1
}
p::after {
position: absolute;
content: '!';
background: white;
z-index: 1;
right: 0
}
<p>Welcome to adventure!</p>
Edit: to change background-color for an arbitrary position word, see zer00ne's answer above. I didn't read the question thoroughly, so I wasn't aware that the OP wants the word adventure not adventure!
The smartest way to change any arbitrary word is to wrap it inside a span tag. Here's the workaround for changing the background of the last word: From your delivered code, display: inline-block for p tag, and don't set width for ::after element.
.section_text {
display: inline-block;
background: #3333;
position: relative;
}
.section_text::after {
content: 'adventure!';
position: absolute;
right: 0;
height: 100%;
z-index: 1;
background: red;
}
<p class="section_text">
Welcome to adventure!
</p>
I have a text block on my website:
Specialtyreagents
<h1>Specialtyreagents</h1>
Can I somehow add a - symbol to this block within CSS, so it should looks like this:
Specialty-reagents
I can use only CSS in my case!
Thank you for your help.
Use a pseudoelement with the word you want on mobile, and use font-size to hide or show it.
example
codepen
h1:after {
content: 'Specialty-reagents';
font-size: 0;
}
#media screen and (max-width: 500px) {
h1 {
font-size: 0;
}
h1:after {
font-size: 32px;
}
}
<h1>Specialtyreagents</h1>
With just CSS you can't include that - but if you need to use it in a specific case you can write again the text like this with a pseudo-element:
h1 {
font-size: 0;
}
h1:before {
content: "Specialty-reagents";
display: block;
font-size: 1.5rem;
}
<h2>Specialtyreagents</h2>
<h1>Specialtyreagents</h1>
On the long ride you can have two html elements, one for mobile and one for desktop:
<h1 class="desktop">Specialtyreagents</h1>
and
<h1 class="mobile" >Specialty-reagents</h1>
Then, you should have some css code for handling it:
.desktop {
display: block;
}
.mobile {
display: none;
}
#media (max-width: 720px) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
With media query:
#media only screen and (max-width: 500px) {
h1 > span:after {
content: "-";
}
}
<h1>Specialty<span></span>reagents</h1>
As others have said, you can use a pseudo element to achieve this.
The best way to go is to just add a new pseudo element when viewing on a small viewport (ie. a mobile phone). Here is some extra info on pseudo elements and how they can be used.
Example...
#media screen and (max-width: 768px) {
h1 {
font-size: 0px;
}
h1::after {
font-size: 30px;
display: block;
content: "Specialty-reagents";
}
}
<h1>Specialtyreagents</h1>
The only thing you may need to change if the max-width for the media query and the font size of the heading.
Try this code for the solution please:
#media only screen and (max-width: 500px) {
h1 > span:after {
content: "-";
}
}
I would like to achieve the effect of a scrolling line beneath anchor links to meet a client brief - I stupidly imagined a bit of CSS3 would easily achieve this without any bother, so I've setup something along the lines of the following code, and spent the past hour banging my head on the desk due to a very annoying bug I don't understand.
Everything works great on desktop, but on mobile (both iOS and Android) I experience an issue when I select a link - First click, the animation runs, and I have to click a second time to trigger the link (same happens with below codepen). It's baffling me and I wonder if anyone can shine any light on things for me!!?
http://codepen.io/pablodancer/pen/ZLJVOP
li {
display: inline-block;
list-style-type: none;
}
li a {
text-decoration: none;
position: relative;
line-height: 1;
height: auto;
padding: 0;
margin-right: 8px;
padding-bottom: 8px;
z-index: 1;
}
li a:after {
display: block;
left: 0;
bottom: 0;
margin-top: 4px;
width: 0;
height: 5px;
background-color: blue;
content: "";
z-index: -3;
transition: width 0.3s;
}
li a:hover:after,
li.active a:after {
width: 100%;
}
<ul>
<li class="active">nme</li>
<li>bbc</li>
<li>blah3</li>
<li>blah4</li>
<li>blah5</li>
</ul>
I believe the double tap issue is only related to iOS. What I normally do is to simply hide the pseudo element on touch devices, either approach below will work.
(1) Using CSS media queries, it works in iOS 9+ and Android 5+.
#media (hover: none) {
li a:after {
display: none;
}
}
(2) Using a bit of Javascript + CSS:
(function(html) {
html.className += ('ontouchstart' in window) ? ' touch ' : ' no-touch ';
})(document.documentElement);
.touch li a:after {
display: none;
}
In addition, if you wish to keep the active style, you can use selector li:not(.active) a:after. You may also want to set li {vertical-align: top;} so the items can lineup nicely.
This is caused by a non-standard behavior adopted by WebKit on IOS.
Weird (but common) issue needs a weird (and simple) hack, here is how I solved it with only CSS and bullet-proof browser support.
Basically, the magic is using transforms and IOS/WebKit will not consider as hidden the pseudo element, so it will not force the double-tap behavior when it's shown on hover:
li a:after {
/* keep the element 'visible' and with a size */
display: block;
content: '';
width: 100%;
height: 2px;
...
/* then 'hide' it with a transform */
transform: scaleX(0);
...
/* add a nice transition */
transition: transform 600ms ease;
}
li a:hover:after {
/* 'show' the element by resetting the transform */
transform: scaleX(1);
}
Till now, it seems to do the trick, why? because the size of a transformed element is not computed in the reflow of the page :)
How can I add a short line below link ? The line should be visible only on hover.
I tried with border-bottom, but that way the line is 100% of the link width and I want the line to be shorter than the link .
Here is a example image of the effect that I try to make.
You can try using ::after pseudo element:
a {
position: relative;
text-decoration: none;
}
a:hover::after {
content: "";
position: absolute;
left: 25%;
right: 25%;
bottom: 0;
border: 1px solid black;
}
<a href='#'>Demo Link</a>
This is something I just thought of, check it out see what you think. So we use :after and create a line under the text. This only works if the parent has a width (for centering).
HTML:
<div>Test</div>
CSS:
div {
width: 30px;
}
div:hover:after {
content: "";
display: block;
width: 5px;
border-bottom: 1px solid;
margin: 0 auto;
}
DEMO
Updated CSS:
div {
display: inline-block;
}
Not sure why I didnt think of this but you can just use inline-block to get it to center without the parent having a width.
DEMO HERE
Here is a link using the same method, just incase you got confused.
DEMO HERE
So I have now be told I should even point out the most obvious thing so here is an update just for the people that don't know width can be a percentage.
width: 70%;
Changed the width from 5px to 70% so it will expand with the width of the text.
DEMO HERE
Edit:
Ruddy's solution has the same result and is more elegant so based on that, I used it recently with addition of transition, making it a bit more eye catching and I thought it would be useful to share here:
a {
display: inline-block;
text-decoration:none
}
a:after {
content: "";
display: block;
width: 0;
border-bottom: 1px solid;
margin: 0 auto;
transition:all 0.3s linear 0s;
}
a:hover:after {
width: 90%;
}
jsfiddle link
(Original answer below)
Check this i just came up with, playing in the fiddle:
<a class="bordered" href="#">I am a link, hover to see</a>
a.bordered {
text-decoration:none;
position: relative;
z-index : 1;
display:inline-block;
}
a.bordered:hover:before {
content : "";
position: absolute;
left : 50%;
bottom : 0;
height : 1px;
width : 80%;
border-bottom:1px solid grey;
margin-left:-40%;
}
Depending on the percentages, you may play with a.bordered:hover:before margin and left position.
Simply use this class:
.link:hover {
background-image:url("YOUR-SMALL-LINE-BOTTOM.png")
}
like this, the line will appear when you hover over the element. And you can specify in the image, how small or big the line has to be.
Try creating another Div for border. And adjust the width of that div according to your choice. I hope this will help.
what about this?
a {text-decoration:none;position:relative;}
a:hover:before {content:"_";position:absolute;bottom:-5px;left:50%;width:10px;margin:0 0 0 -5px;}
check this fiddle for more: http://jsfiddle.net/h7Xb5/
use underline or if u want the line to be much shorter try scalar vector graphics(svg) with this you can have custom lines.
<svg id="line "height="40" width="40">
<line x1="0" y1="0" x2="700" y2="20" style="stroke:rgb(125,0,0);stroke-width:2" />