Is it possible to not display an element, as with display:none, but continue to display the :before and/or :after?
I tried
#myspan {display:none}
#myspan:after {display:inline; content:"*"}
but that didn't work. I'm trying to have CSS replace the content of a span with an asterisk, without introducing jQuery.
No, it is not possible.
Pseudo elements are rendered like children:
<span id="myspan">whatever<after></span>
And display:none hides the element including all children.
EDIT 1
JavaScript is your best option in my opinion. Even without jQuery changing text is not hard:
document.getElementById("myspan").innerHTML = "*";
Demo
EDIT 2
However, if you really want to do it with CSS, you can use negative text-indent to hide the text and relative positioning to show the asterisk:
#myspan {
text-indent: -9999px;
display: block;
}
#myspan:before {
content: '*';
position: absolute;
top: 0;
left: 9999px;
}
Demo
I think a very easy approach to doing this is to exploit the visibility property. But note that a "hidden" element still takes up the space. But if you are okay with that, just make make the parent element "hidden" and pseudo element "visible":
#myspan {visibility:hidden}
#myspan: after {visibility:visible}
Once you have the visibility taken care of, feel free to play around with the position so that excess space is avoided.
Something like,
myspan {
visibility: hidden;
position: relative;
}
myspan:after {
visibility: visible;
position: absolute;
left: 10px;
}
It's definitely possible. Use font-size: 0px instead of display: none:
#myspan {
/* display: none; */
font-size: 0px;
}
#myspan:after {
/* display: inline; */
font-size: 16px;
content: "*"
}
A demo is here.
In this case you can only use px/pt for the display text font units.
Use:
#myspan {font-size:0}
#myspan:after {font-size:16px; content:"*"}
If you have a min-font size specified, it won't work (browser setting). I'd only use this method for things like previous and next buttons so that screen readers will read "Previous", but you want to replace it with a \276e. So plan for what it will look like with the text showing up.
As explained by #bookcasey, setting display: none on an element unavoidably hides the :after or :before pseudo-element too (because they are not really something displayed after or before an element but content added inside the element, after or before its real content).
But the goal of replacing an element’s real content by generated content is in principle possible, according to the old (2003) CSS3 Generated and Replaced Content Module draft, by simply setting content on the element, e.g.
#myspan { content: "*"; }
So far, only Opera supports this. But a special case where the replacing content is an image is supported by WebKit browsers, too:
#myspan { content: url(asterisk.png); }
It is possible, but you need to use visibility:hidden instead of display:none.
See the answers in the following question for more detail:
How can I replace text with CSS?
You need to break them into multiple content DIV blocks because the style is inherited by child elements. So it's not possible once the parent display style is defined.
Related
A few other questions have already addressed how best to apply text-align: justify to get inline-block elements to spread out evenly… for example, How do I *really* justify a horizontal menu in HTML+CSS?
However, the 100% width element that "clears" the line of inline-block elements is given its own line by the browser. I can't figure out how to get rid of that empty vertical space without using line-height: 0; on the parent element.
For an example of the problem, see this fiddle
For my solution that uses line-height: 0;, see this fiddle
The solution I'm using requires that a new line-height be applied to the child elements, but any previously set line-height is lost. Is anyone aware of a better solution? I want to avoid tables so that the elements can wrap when necessary, and also flexbox because the browser support isn't there yet. I also want to avoid floats because the number of elements being spaced out will be arbitrary.
Updated the "Future" solution info below; still not yet fully supported.
Present Workaround (IE8+, FF, Chrome Tested)
See this fiddle.
Relevant CSS
.prevNext {
text-align: justify;
}
.prevNext a {
display: inline-block;
position: relative;
top: 1.2em; /* your line-height */
}
.prevNext:before{
content: '';
display: block;
width: 100%;
margin-bottom: -1.2em; /* your line-height */
}
.prevNext:after {
content: '';
display: inline-block;
width: 100%;
}
Explanation
The display: block on the :before element with the negative bottom margin pulls the lines of text up one line height which eliminates the extra line, but displaces the text. Then with the position: relative on the inline-block elements the displacement is counteracted, but without adding the additional line back.
Though css cannot directly access a line-height "unit" per se, the use of em in the margin-bottom and top settings easily accommodates any line-height given as one of the multiplier values. So 1.2, 120%, or 1.2em are all equal in calculation with respect to line-height, which makes the use of em a good choice here, as even if line-height: 1.2 is set, then 1.2em for margin-bottom and top will match. Good coding to normalize the look of a site means at some point line-height should be defined explicitly, so if any of the multiplier methods are used, then the equivalent em unit will give the same value as the line-height. And if line-height is set to a non-em length, such as px, that instead could be set.
Definitely having a variable or mixin using a css preprocessor such as LESS or SCSS could help keep these values matching the appropriate line-height, or javascript could be used to dynamically read such, but really, the line-height should be known in the context of where this is being used, and the appropriate settings here made.
UPDATE for minified text (no spaces) issue
Kubi's comment noted that a minification of the html that removes the spaces between the <a> elements causes the justification to fail. A pseudo-space within the <a> tag does not help (but that is expected, as the space is happening inside the inline-block element), a <wbr> added between the <a> tags does not help (probably because a break is not necessary to the next line), so if minification is desired, then the solution is a hard coded non-breaking space character --other space characters like thin space and en space did not work (surprisingly).
Nearing a Future Clean Solution
A solution in which webkit was behind the times (as of first writing this) was:
.prevNext {
text-align: justify;
-moz-text-align-last: justify;
-webkit-text-align-last: justify; /* not implemented yet, and will not be */
text-align-last: justify; /* IE */
}
It works in FF 12.0+ and IE8+ (buggy in IE7).
For Webkit, as of version 39 (at least, might have crept in earlier) it does support it without the -webkit- extension but only if the user has enabled the experimental features (which can be done at chrome://flags/#enable-experimental-web-platform-features). Rumor is that version 41 or 42 should see full support. Since it is not seamlessly supported by webkit yet, it is still only a partial solution. However, I thought I should post it as it can be useful for some.
Consider the following:
.prevNext {
display: table;
width: 100%
}
.prevNext a {
display: table-cell;
text-align: center
}
(Also see the edited fiddle.) Is that what you are looking for? The advantage of this technique is that you can add more items and they will all be centered automatically. Supported by all modern Web browsers.
First off, I like the approach of the pseudo-element in order to keep the markup semantic. I think you should stick with the overall approach. It's far better than resorting to tables, unnecessary markup, or over the top scripts to grab the positioning data.
For everyone stressed about text-align being hacky - c'mon! It's better that the html be semantic at the expense of the CSS than vice versa.
So, from my understanding, you're trying to achieve this justified inline-block effect without having to worry about resetting the line-height every time right? I contend that you simply add
.prevNext *{
line-height: 1.2; /* or normal */
}
Then you can go about coding as though nothing happened. Here's Paul Irish's quote about the * selector if you're worried about performance:
"...you are not allowed to care about the performance of * unless you concatenate all your javascript, have it at the bottom, minify your css and js, gzip all your assets, and losslessly compress all your images. If you aren't getting 90+ Page Speed scores, it's way too early to be thinking about selector optimization."
Hope this helps!
-J Cole Morrison
Attempting to text-align for this problem is pretty hackish. The text-align property is meant to align inline content of a block (specifically text) -- it is not meant to align html elements.
I understand that you are trying to avoid floats, but in my opinion floats are the best way to accomplish what you are trying to do.
In your example you have line-height:1.2, without a unit. This may cause issues. If you're not using borders you could give the parent and the children a line-height of 0.
The other options I can think of are:
Use display:table on the parent and display:table-cell on the children to simulate table like behaviour. And you align the first item left, and the last one right. See this fiddle.
Use javascript to do a count of the nav children and then give them a equally distributed width. eg. 4 children, 25% width each. And align the first and last items left and right respectively.
There is a way to evenly distribute the items but is a convoluted method that requires some non breaking spaces to be carefully placed in the html along with a negative margin and text-align:justify. You could try and adapt it the the nav element. See example here.
Your fiddle is awfully specific. It seems to me for your case this CSS would work well:
.prevNext {
border: 1px solid #ccc;
position: relative;
height: 1.5em;
}
.prevNext a {
display: block;
position: absolute;
top: 0;
}
.prevNext a:first-child {
left: 0;
text-align: left;
}
.prevNext a:last-child {
right: 0;
text-align: right;
}
As stated by #Scotts, the following has been implemented inside Chrome, without the -webkit part , which I really loved btw, specially since we need to get rid of the -browser-specific-shǐt real soon.
.prevNext {
text-align: justify;
-moz-text-align-last: justify;
-webkit-text-align-last: justify; /* not implemented yet, and will not be */
text-align-last: justify; /* IE + Chrome */
}
Note: Though still the Safari and Opera don't support it yet (08-SEPT-16).
I think the best way would be to create the clickable element with a specific class/id and then assign float:left or float:right accordingly. Hope that helps.
Is it possible to use the :after CSS pseudo-element to offset alignment without actually inserting anything in content: "". It doesn't seem to render unless content is specified so just wondered whether this is possible or if there are any known workarounds.
As an example:-
.nav-primary li.level0 a:after {
content: "";
padding-right: 1px;
margin-left: -1px;
}
As you can see from the example, simply changing the colour of the content would not work in this instance as would still consume space affecting the offset.
It is possible to use an :after pseudo-element with the content property set to the empty string "", but not without setting it all (so that it has its initial value none, which means that the pseudo-element is not generated at all).
The reason why you do not see any effect is that your settings effectively cancel each other out. You set a negative left margin, shifting the element leftwards, but you set an equal amount of padding. The pseudo-element itself is empty and thus invisible, so all that matters is the space that it occupies.
This can be illustrated by drawing an outline. I’m using the value 10px instead of 1px for clarity:
.nav-primary li.level0 a:after {
content: "";
padding-right: 10px;
margin-left: -10px;
outline: solid red;
}
<div class=nav-primary>
<ul>
<li class=level0><a href=foo>bar</a>xxx
<li><a href=foo>bar</a>xxx
</ul>
</div>
I ran into a similar situation which was fixed by adding display: block to the :before styles.
To my knowledge it is possible to use CSS pseudoelements with blank content. The attribute content needs to be specified but can be left blank (as you did in your example code).
I would think that your issue could be related to the display mode - pseudoelements are inline by default. If I understand well what you're trying to achieve, I would go this way:
Set display mode to inline-block.
Specify concrete dimensions of your offset alignment (width, height).
See JSFiddle.
I'm making a printable certificate. Since background images aren't enabled by default I'm making a border by placing img tags.
For some reason there are gaps of a few pixels between the img tags...
jsfiddle
You just need to make your images block elements:
img { display: block; }
and it'll all fall into line. Images are by default inline elements, so as Xavi said you're getting white space in there from your line breaks. Of course if there'll be any other images involved, you'll need to refine your selector.
set Vertical-align in your #top_border and #bottom_border as
#top_border{ vertical-align:bottom}
#bottom_border{vertical-align:top}
FIDDLE here
Use position: relative; to shift your images to fill the gap
#bottom_border{
position: relative;
bottom: 5px;
}
#top_border{
position: relative;
top: 5px;
}
My Fiddle
add
#certificate img { display: block; }
to the end of the css
Try adding font-size: 0 to #certificate. The gaps you see are actually spaces (the character). I fully admit that setting the font size to zero is a bit of a hack. Fortunately, when the white-space rules for css3 are fully supported, you can use text-space-collapse: collapse instead.
A few other questions have already addressed how best to apply text-align: justify to get inline-block elements to spread out evenly… for example, How do I *really* justify a horizontal menu in HTML+CSS?
However, the 100% width element that "clears" the line of inline-block elements is given its own line by the browser. I can't figure out how to get rid of that empty vertical space without using line-height: 0; on the parent element.
For an example of the problem, see this fiddle
For my solution that uses line-height: 0;, see this fiddle
The solution I'm using requires that a new line-height be applied to the child elements, but any previously set line-height is lost. Is anyone aware of a better solution? I want to avoid tables so that the elements can wrap when necessary, and also flexbox because the browser support isn't there yet. I also want to avoid floats because the number of elements being spaced out will be arbitrary.
Updated the "Future" solution info below; still not yet fully supported.
Present Workaround (IE8+, FF, Chrome Tested)
See this fiddle.
Relevant CSS
.prevNext {
text-align: justify;
}
.prevNext a {
display: inline-block;
position: relative;
top: 1.2em; /* your line-height */
}
.prevNext:before{
content: '';
display: block;
width: 100%;
margin-bottom: -1.2em; /* your line-height */
}
.prevNext:after {
content: '';
display: inline-block;
width: 100%;
}
Explanation
The display: block on the :before element with the negative bottom margin pulls the lines of text up one line height which eliminates the extra line, but displaces the text. Then with the position: relative on the inline-block elements the displacement is counteracted, but without adding the additional line back.
Though css cannot directly access a line-height "unit" per se, the use of em in the margin-bottom and top settings easily accommodates any line-height given as one of the multiplier values. So 1.2, 120%, or 1.2em are all equal in calculation with respect to line-height, which makes the use of em a good choice here, as even if line-height: 1.2 is set, then 1.2em for margin-bottom and top will match. Good coding to normalize the look of a site means at some point line-height should be defined explicitly, so if any of the multiplier methods are used, then the equivalent em unit will give the same value as the line-height. And if line-height is set to a non-em length, such as px, that instead could be set.
Definitely having a variable or mixin using a css preprocessor such as LESS or SCSS could help keep these values matching the appropriate line-height, or javascript could be used to dynamically read such, but really, the line-height should be known in the context of where this is being used, and the appropriate settings here made.
UPDATE for minified text (no spaces) issue
Kubi's comment noted that a minification of the html that removes the spaces between the <a> elements causes the justification to fail. A pseudo-space within the <a> tag does not help (but that is expected, as the space is happening inside the inline-block element), a <wbr> added between the <a> tags does not help (probably because a break is not necessary to the next line), so if minification is desired, then the solution is a hard coded non-breaking space character --other space characters like thin space and en space did not work (surprisingly).
Nearing a Future Clean Solution
A solution in which webkit was behind the times (as of first writing this) was:
.prevNext {
text-align: justify;
-moz-text-align-last: justify;
-webkit-text-align-last: justify; /* not implemented yet, and will not be */
text-align-last: justify; /* IE */
}
It works in FF 12.0+ and IE8+ (buggy in IE7).
For Webkit, as of version 39 (at least, might have crept in earlier) it does support it without the -webkit- extension but only if the user has enabled the experimental features (which can be done at chrome://flags/#enable-experimental-web-platform-features). Rumor is that version 41 or 42 should see full support. Since it is not seamlessly supported by webkit yet, it is still only a partial solution. However, I thought I should post it as it can be useful for some.
Consider the following:
.prevNext {
display: table;
width: 100%
}
.prevNext a {
display: table-cell;
text-align: center
}
(Also see the edited fiddle.) Is that what you are looking for? The advantage of this technique is that you can add more items and they will all be centered automatically. Supported by all modern Web browsers.
First off, I like the approach of the pseudo-element in order to keep the markup semantic. I think you should stick with the overall approach. It's far better than resorting to tables, unnecessary markup, or over the top scripts to grab the positioning data.
For everyone stressed about text-align being hacky - c'mon! It's better that the html be semantic at the expense of the CSS than vice versa.
So, from my understanding, you're trying to achieve this justified inline-block effect without having to worry about resetting the line-height every time right? I contend that you simply add
.prevNext *{
line-height: 1.2; /* or normal */
}
Then you can go about coding as though nothing happened. Here's Paul Irish's quote about the * selector if you're worried about performance:
"...you are not allowed to care about the performance of * unless you concatenate all your javascript, have it at the bottom, minify your css and js, gzip all your assets, and losslessly compress all your images. If you aren't getting 90+ Page Speed scores, it's way too early to be thinking about selector optimization."
Hope this helps!
-J Cole Morrison
Attempting to text-align for this problem is pretty hackish. The text-align property is meant to align inline content of a block (specifically text) -- it is not meant to align html elements.
I understand that you are trying to avoid floats, but in my opinion floats are the best way to accomplish what you are trying to do.
In your example you have line-height:1.2, without a unit. This may cause issues. If you're not using borders you could give the parent and the children a line-height of 0.
The other options I can think of are:
Use display:table on the parent and display:table-cell on the children to simulate table like behaviour. And you align the first item left, and the last one right. See this fiddle.
Use javascript to do a count of the nav children and then give them a equally distributed width. eg. 4 children, 25% width each. And align the first and last items left and right respectively.
There is a way to evenly distribute the items but is a convoluted method that requires some non breaking spaces to be carefully placed in the html along with a negative margin and text-align:justify. You could try and adapt it the the nav element. See example here.
Your fiddle is awfully specific. It seems to me for your case this CSS would work well:
.prevNext {
border: 1px solid #ccc;
position: relative;
height: 1.5em;
}
.prevNext a {
display: block;
position: absolute;
top: 0;
}
.prevNext a:first-child {
left: 0;
text-align: left;
}
.prevNext a:last-child {
right: 0;
text-align: right;
}
As stated by #Scotts, the following has been implemented inside Chrome, without the -webkit part , which I really loved btw, specially since we need to get rid of the -browser-specific-shǐt real soon.
.prevNext {
text-align: justify;
-moz-text-align-last: justify;
-webkit-text-align-last: justify; /* not implemented yet, and will not be */
text-align-last: justify; /* IE + Chrome */
}
Note: Though still the Safari and Opera don't support it yet (08-SEPT-16).
I think the best way would be to create the clickable element with a specific class/id and then assign float:left or float:right accordingly. Hope that helps.
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 7 years ago.
In Firefox only my video thumbnails are displaying mysterious 2-3 pixels of white space between the bottom of my image and its border (see below).
I've tried everything I can think of in Firebug with no luck.
How can I remove this white space?
You're seeing the space for descenders (the bits that hang off the bottom of 'y' and 'p') because img is an inline element by default. This removes the gap:
.youtube-thumb img { display: block; }
You can use code below if you don't want to modify block mode:
img{vertical-align:text-bottom}
Or you can use following as Stuart suggests:
img{vertical-align:bottom}
If you would like to preserve the image as inline you can put vertical-align: top or vertical-align: bottom on it. By default it is aligned on the baseline hence the few pixels beneath it.
I've set up a JSFiddle to test several different solutions to this problem. Based on the [vague] criteria of
1) Maximum flexibility
2) No weird behavior
The accepted answer here of
img { display: block; }
which is recommended by a lot of people (such as in this excellent article), actually ranks fourth.
1st, 2nd, and 3rd place are all a toss-up between these three solutions:
1) The solution given by #Dave Kok and #Hasan Gursoy:
img { vertical-align: top; } /* or bottom */
pros:
All display values work on both the parent and img.
No very strange behavior; any siblings of the img fall where you'd expect them to.
Very efficient.
cons:
In the [perfectly valid] case of both the parent and img having `display: inline`, the value of this property can determine the position of the img's parent (a bit strange).
2) Setting font-size: 0; on the parent element:
.parent {
font-size: 0;
vertical-align: top;
}
.parent > * {
font-size: 16px;
vertical-align: top;
}
Since this one [kind of] requires vertical-align: top on the img, this is basically an extension of the 1st solution.
pros:
All display values work on both the parent and img.
No very strange behavior; any siblings of the img fall where you'd expect them to.
Fixes the inline whitespace problem for any siblings of the img.
Although this still moves the position of the parent in the case of the parent and img both having `display: inline`, at least you can't see the parent anymore.
cons:
Less efficient code.
This assumes "correct" markup; if the img has text node siblings, they won't show up.
3) Setting line-height: 0 on the parent element:
.parent {
line-height: 0;
vertical-align: top;
}
.parent > * {
line-height: 1.15;
vertical-align: top;
}
Similar to the 2nd solution in that, to make it fully flexible, it basically becomes an extension of the 1st.
pros:
Behaves like the first two solutions on all display combinations except when the parent and img have `display: inline`.
cons:
Less efficient code.
In the case of both the parent and img having `display: inline`, we get all sorts of crazy. (Maybe playing with the `line-height` property isn't the best idea...)
So there you have it. I hope this helps some poor soul.
I found this question and none of the solutions here worked for me. I found another solution that got rid of the gaps below images in Chrome. I had to add line-height:0; to the img selector in my CSS and the gaps below images went away.
Crazy that this problem persists in browsers in 2013.
Had this prob, found perfect solution elsewhere if you dont want you use block just add
img { vertical-align: top }
.youtube-thumb img {display:block;} or .youtube-thumb img {float:left;}
Give the height of the div .youtube-thumb the height of the image. That should set the problem in Firefox browser.
.youtube-thumb{ height: 106px }
As stated before, the image is treated as text, so the bottom is to accommodate for those pesky: "p,q,y,g,j"; the easiest solution is to assign the img display:block; in your css.
But this does inhibit the standard image behavior of flowing with the text. To keep that behavior and eliminate the space. I recommend wrapping the image with something like this.
<style>
.imageHolder
{
display: inline-block;
}
img.noSpace
{
display: block;
}
</style>
<div class="imageHolder"><img src="myimg.png" class="noSpace"/></div>