Hide element, but show CSS generated content
Clean Solution
You could use visibility: hidden
, but with this solution, the hidden content will still take up space. If this doesn't matter to you, this is how you would do it:
span {
visibility: hidden;
}
span:before {
visibility: visible;
}
Hackish Alternative Solution
Another solution would be to set the font-size
of the span to zero* to a really small value. Advantage of this method: The hidden content won't take up any space. Drawback: You won't be able to use relative units like em or % for the font-size of the :before
content.
span:before {
content: "Lorem ";
font-size: 16px;
font-size: 1rem; /* Maintain relative font-size in browsers that support it */
letter-spacing: normal;
color: #000;
}
span {
font-size: 1px;
letter-spacing: -1px;
color: transparent;
}
Example on jsfiddle.
Update (May 4, 2015): With CSS3, you can now use the rem
(Root EM) unit to maintain relative font-sizes in the :before
element. (Browser support.)
*A previous version of this post suggested setting the font size to zero. However, this does not work as desired in some browsers, because CSS does not define what behavior is expected when the font-size is set to zero. For cross-browser compatibility, use a small font size like mentioned above.
Hide certain content from a parent element but show child in CSS
You can use font-size
to hide the text, then overwrite it for the child span elements like so:
.price { font-size: 0px;}
.price span { font-size: 16px;}
<p class="price">From: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>189.00</span></p>
show pseudo element but not parent element
You can stick to the "text-indent" method (or better the "Kellum Method") and use CSS positioning for the pseudo element:
li {
display:block;
position:relative;
text-indent: -100%;
white-space: nowrap;
overflow: hidden;
}
li:after {
content: "visible pseudo-element";
position:absolute;
right:0;
}
http://jsfiddle.net/Fiddel/aopteq8m/
In CSS use display:none on the element, but keep its :after
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
How can I hide an element with css while still keeping it on the page?
There are three ways to hidden elements and keep the page position. You can get more information about between Normal flow and css style(ie: opcity, visibility) attribute relation.
- visibility
- opcity
- transparent
$('div').click(function (){ alert(this.innerHTML)})
div{ border: 1px solid #000;}.one{ visibility:hidden;}.two{ opacity: 0;}.three{ background: transparent; color: transparent;}
<!DOCTYPE html><html><head><script src="//code.jquery.com/jquery-2.1.1.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title></head><body> 1 <div class="one">visibility</div> 2 <div class="two">opticy</div> 3 <div class="three">transparent</div> 4</body></html>
Related Topics
How to Use Custom Fonts in an HTML5 Canvas Element
Advantages and Disadvantages of Using Base64 Encoded Images
Make a Perfect Circle Around a Div of Variable Height
@Media Queries and Image Swapping
How to Convert an HTML Table to Csv
HTML Button Opening Link in New Tab
In The Dom Are Node Ids Case Sensititve
Jsf Vs HTML(Jsp) for Enterprise Portals UI Layer. Which One to Choose? and Why
How to Make "See Through" Text
How to Stretch a Background Image to Cover The Entire HTML Element
Convert Uppercase Letter to Lowercase and First Uppercase in Sentence Using CSS
Img's Max-Height Not Respecting Parent's Dimensions
Bootstrap Row and Col Explanation
How (And Why) to Use Display: Table-Cell (CSS)
Chrome Auto Formats Input=Number