I'm editing a WordPress site at present. I've been researching this a bit but I can't work out why this isn't working.
The problem is I'm confined to the bounds of CSS editing only. I cannot touch the HTML. Thus I am hoping to edit content via CSS. (I realize this is abnormal).
So far I can across this suggested solution. It did however, not work for me.
Does anyone know a cool trick to edit content via CSS and not HTML, PHP, JavaScript etc...
Suggested code below not working
.comment-reply-title {
display:none !important;
}
.comment-reply-title::after {
content: "New text";
text-indent: 0;
display: block;
line-height: initial;
}
You can use visibility:hidden in div then apply overflow:visible to ::after
font-size:0 is to hide/collapse the extra space left by div
.comment-reply-title {
visibility: hidden;
font-size: 0
}
.comment-reply-title::after {
content: "New text";
visibility: visible;
font-size: 16px
}
<div class="comment-reply-title">Old Text</div>
Related
Not sure if anyone else has come across this - I am running Safari 12.
I have a very simple setup to demonstrate this bug.
HTML:
<div class="contents">
<p>Hello!</p>
</div>
CSS:
.contents {
display: contents;
}
.hide {
display: none;
}
See this CodePen: https://codepen.io/ericxgao/pen/dreqWp
If you go to the CodePen, inspect the text and then change the class of the wrapping div from "contents" to "hide", nothing actually happens. In every other browser, the text disappears but in Safari, it doesn't seem to apply. This appears to be a bug documented here: https://bugs.webkit.org/show_bug.cgi?id=188259
I'm curious if there's any clever workarounds available here. What's the cleanest way that I can preserve this behavior without overhauling my existing code that uses this toggle?
I ended up using this instead until Safari fixes the issue.
.hide * {
visibility: hidden;
width: 0;
height: 0;
}
Is there a way of hiding an element's contents, but keep its :before content visible?
Say I have the following code:
HTML:
<span class="addbefore hidetext">You are here</span>
CSS:
.addbefore:before {
content: "Show this";
}
.hidetext {
// What do I do here to hide the content without hiding the :before content?
}
I've tried:
using display: none and setting display: inline on :before, but both are still hidden
using width: 0; overflow: hidden;, but then additional space seems to be added (?)
using color: transparent;, but then, of course, the content of the span still takes up space
using text-indent: -....px, but
this is frowned upon by search engines and
it seems not to work for span elements (?)
Any other ideas as to how I might do this?
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.
For better browser support:
Wrap the text that should be hidden within an additional span element, and apply classes to that span to hide the text you wish to be hidden.
HTML:
<span class="addbefore">
<span class="visuallyhidden">This text will not show.</span>
</span>
CSS:
.addbefore:before {
content: "Show this";
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
The .visuallyhidden class used above is from the current version of HTML5 Boilerplate: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
The advantages of this solution:
Semantic HTML
Complete browser support
No problems with tiny text like other small font-size solutions.
The hidden content won't take up space
See it in action here: http://jsfiddle.net/tinystride/A9SSb/
I took a similar approach as suggested here with visibility, but that still has a content box.
My solution is to simply use font-size to hide the target text.
span {
font-size: 0;
}
span:before {
font-size: 16px;
}
Building on #anroesti's excellent hack, here's a solution if you need to apply in unknown contexts in terms of font size and color, i.e. you are not sure if resetting to color:black;font-size:1rem; will not mess things up:
<span abbrev-content="Intl.">International</span>
#media only screen and (max-width: 700px) { /* very narrow viewports */
span[abbrev-content] { font-size: 0.001em; visibility: hidden; }
span[abbrev-content]::before {
content: attr(abbrev-content);
font-size: 1000em;
visibility: visible;
}
}
If your span content is a paragraph and not just a word, you may also need the negative letter-spacing.
I don't think it's possible with pure css and html. Looking at this example http://jsbin.com/efeco4 you will see that what is inside content property of css, is wrapped by the element. So any manipulation of the element will affect the css content also.
So an alternative thought could be to use jquery, to empty the html content inside tag div with class hidetext without affect the content of css. A sample code could be this:
$('.hidetext').empty();
Example: http://jsbin.com/efeco4/2
Just like the Title says, "How to use text as a background instead of an image?"
I'm making a little application, that I personally think is cool but will probably be a waste of peoples time, and am altering the button in the drop down button to an upside down triangle using this html code ▼ . I'm not talking about setting the z-index or anything just simply placing a character for the little arrow. I thought about leaving it blank but I don't think users would understand that they are supposed to use the menu if I did so. Therefore I'm going to use the upside down triangle.
My CSS for the drop-down list is set up like this
select {
border: none;
overflow: hidden;
background: no-repeat right #ffffff;
-moz-appearance: none;
-webkit-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Put the text inside an HTML tag with class .text-background, set CSS styles to
.text-background {
position: absolute;
z-index: 1;
}
and set z-index to the elements you want to be on top of the text with z-index higher than 1.
edit:
If you know what the size of the select element is, you probably want to position that text over the dropdown. This however will block the button.
JSFiddle
If you want better looks and functionality you can use a 3rd party libraries such as this or this.
edit 2:
I just found this CSS only solution given by Danield that's probably going to suite your needs better.
https://stackoverflow.com/a/13968900/1419575
Try This, as suggested by Paulo Bergantino:
JS Fiddle
Click Here
HTML
<div id="container">
<div id="background">
Text to have as background
</div>
Normal contents
</div>
CSS
#container{
position: relative;
}
#background{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
overflow: hidden;
}
Please visit this website.
There is a blank space at the bottom. I checked it and there is no minimum height mentioned in my css.
I suspect it's in the body's css details as below:
body {
line-height: 1.5;
font-size: 87.5%;
word-wrap: break-word;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
border: 0;
outline: 0;
background: none repeat scroll 0 0 #EFEFEF;
}
html, body, #page {
height: 100%;
}
This removed the bleed for me in Safari 6.0.3;
#footer-wrapper {
margin-top: 40px;
background: url("../images/footer.png") repeat-x scroll 0 0;
overflow: hidden;
}
You might want to handle that overflow differently tho, based on the content inside it. But this should fix the white space.
I figured it out by just deleting nodes from the DOM bottom-up. It had to be in the #footer-wrapper. As margin-bottom didn't work and you were using relative positioning I figured it was some shadow styling bleeding out of that element.
Update (better fix)
Just found the real issue to the problem;
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Change content: "."; to content: ""; and it's fixed. Or just remove that style at all, as it doesn't seem to have use in that case.
"overflow: hidden"
makes things harder but try,
"overflow: auto"
in order to be able to flow when you need.
I'm late to the show here but it may help somebody in my case I had an empty space at the top I added the margin-top=-20px now the empty space at the bottom, tried almost all suggestions I found on these and many threads and nothing. Decided to run it thru some HTML validator there are a few none of them pick up but after a couple one found an extra character(`) at the end of a tag, and that was it, so it was user clumsiness, took that thing out now my page was shifted, took the negative margin and all good. So try a validator and look for something like this.
margin-bottom: 0px;
This would do it
Btw ..nice site dude :)
Sometimes, it's some iframes/objects that are created by third party services that create this blank space. In my case, Google Adwords and Google Analytics was creating this. So, I removed by adding this CSS:
object[type="application/gas-events-cef"],
iframe[name="google_conversion_frame"] {
display: none !important;
height: 0 !important;
width: 0 !important;
line-height: 0 !important;
font-size: 0 !important;
margin-top: -13px;
float: left;
}
Maybe you will need to add some extra rules for your case. Hope that helps.
Is there a way of hiding an element's contents, but keep its :before content visible?
Say I have the following code:
HTML:
<span class="addbefore hidetext">You are here</span>
CSS:
.addbefore:before {
content: "Show this";
}
.hidetext {
// What do I do here to hide the content without hiding the :before content?
}
I've tried:
using display: none and setting display: inline on :before, but both are still hidden
using width: 0; overflow: hidden;, but then additional space seems to be added (?)
using color: transparent;, but then, of course, the content of the span still takes up space
using text-indent: -....px, but
this is frowned upon by search engines and
it seems not to work for span elements (?)
Any other ideas as to how I might do this?
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.
For better browser support:
Wrap the text that should be hidden within an additional span element, and apply classes to that span to hide the text you wish to be hidden.
HTML:
<span class="addbefore">
<span class="visuallyhidden">This text will not show.</span>
</span>
CSS:
.addbefore:before {
content: "Show this";
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
The .visuallyhidden class used above is from the current version of HTML5 Boilerplate: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
The advantages of this solution:
Semantic HTML
Complete browser support
No problems with tiny text like other small font-size solutions.
The hidden content won't take up space
See it in action here: http://jsfiddle.net/tinystride/A9SSb/
I took a similar approach as suggested here with visibility, but that still has a content box.
My solution is to simply use font-size to hide the target text.
span {
font-size: 0;
}
span:before {
font-size: 16px;
}
Building on #anroesti's excellent hack, here's a solution if you need to apply in unknown contexts in terms of font size and color, i.e. you are not sure if resetting to color:black;font-size:1rem; will not mess things up:
<span abbrev-content="Intl.">International</span>
#media only screen and (max-width: 700px) { /* very narrow viewports */
span[abbrev-content] { font-size: 0.001em; visibility: hidden; }
span[abbrev-content]::before {
content: attr(abbrev-content);
font-size: 1000em;
visibility: visible;
}
}
If your span content is a paragraph and not just a word, you may also need the negative letter-spacing.
I don't think it's possible with pure css and html. Looking at this example http://jsbin.com/efeco4 you will see that what is inside content property of css, is wrapped by the element. So any manipulation of the element will affect the css content also.
So an alternative thought could be to use jquery, to empty the html content inside tag div with class hidetext without affect the content of css. A sample code could be this:
$('.hidetext').empty();
Example: http://jsbin.com/efeco4/2