I have a third party plugin and I need to change a word. They only give me access to CSS:
<span class="apple">This is some words</span>
Changed to:
<span class="apple">This is some text</span>
How would I do that with pure CSS?
You could try as below using pseudo selector :after,
span{
position:relative;
color:transparent;
}
span:after{
content:'This is some text';
position:absolute;
right:10px;
color:#111;
}
<span class="apple">This is some words</span>
If you have access to the HTML then you can hide the wrapper of the unwanted text:
p.old-text-class { diplay: none;}
And insert the new text at the same place in HTML:
<p class="new-text-class">This is some text</p>
Try using a pseudo element with content.
.apple {
visibility: hidden;
}
.apple:before {
content: "This is NEW text";
visibility: visible;
}
<span class="apple">This is OLD text</span>
Related
I have a sentence composed of multiple span elements:
<span class="sentence">
<span>First</span>
<span>second</span>
<span>third.</span>
</span>
When a span gets clicked (:active), I want it to have an increased font but without moving the elements around it horizontally.
Idle
Second word :active
I don't want any Javascript involved (to compute the :active width of the element, or some hack like this), only CSS. A solution would be to add right/left padding by default and suppress it when a word is :active, but it doesn't work for all word lengths: http://jsfiddle.net/Ampwt/1/
Any idea of how I could achieve this?
Apply width and height to your span. Please see sample css.
.sentence span {
display:inline-block;
vertical-align:middle;
font-size:1.5em;
width: 170px;
height:30px;
}
.sentence span:active {
font-size:2em;
}
Use transform: scale(): http://jsfiddle.net/Ampwt/2/.
<span class="sentence">
<span>First</span>
<span>second</span>
<span>third.</span>
</span>
<br />
<span class="sentence">
<span>First</span>
<span>very long word</span>
<span>third.</span>
</span>
CSS:
.sentence span {
display:inline-block;
vertical-align:middle;
font-size:1.5em;
padding:0 1em;
}
.sentence span:active {
-webkit-transform: scale(2);
transform: scale(2);
}
<td class="col" style="display:none">AAA
<span prop="1" class=" clear-icon " style=""></span>
</td>
I want to use pure css to hide text "AAA" to show span btn.
Is there a way to do it in pure css?
If your design is not really responsive, I mean you can just need to set fixed font-size for the inner span, I think we have a clean solution like this. The idea is to set font-size of the td to 0, it will hide the text node completely:
.col[style*="display:none"] {
display:table-cell!important;
font-size:0;
}
.col > span {
font-size:20px;
}
Demo.
You can use visibility property but this will reserve the space for text "AAA":
.col {
visibility:hidden;
}
.clear-icon {
visibility:visible;
}
Also, if you can't remove display:block !important; from your td tag just add !important rule in CSS
.col {
display:block !important;
visibility:hidden;
}
http://jsfiddle.net/vLNEp/4/
<table><tr><td class="col"><span class="hidden">AAA</span>
<span prop="1" class="clear-icon"></span>
</td></tr></table>
.col .hidden {position:absolute;top: -9999px; left: -9999px;}
.col {
visibility:hidden;
}
.col span {
visibility:visible;
}
<table>
<td class="col">
AAA <span>Show Me</span>
</td>
</table>
I want to display the letters of my logo text in different colors, but using span is very rough and using JavaScript slows the page loading time. So I tried to use the CSS pseudo element :before, using multiple classes of same element but it’s not working. It shows only the letter of last class, that is letter4. Here is the code:
.letter1:before {
content:"Z";
color:red;
}
.letter2:before {
content:"O";
color:green;
}
.letter3:before {
content:"N";
color:blue;
}
.letter4:before {
content:"E";
color:purple;
}
And the HTML:
<span class='letter1 letter2 letter3 letter4'> </span>
How do I make it work?
Here you are SIR
demo: http://jsfiddle.net/7UjgL/
the style:
.letter{
width:40px;
height:20px;
position:relative;
letter-spacing: 26px;
}
.letter:first-letter{
color:red;
}
.letter:before,.letter:after{
position:absolute;
top: 0px;
}
.letter:before{
content: 'o';
color: green;
left: 11px;
}
.letter:after{
content:'n';
color:blue;
left: 22px;
}
the markup:
<div class=letter>ze</div>
You should use separate span elements for it because it will be more readable in the long run.
CSS:
.letter1{color:red;}
.letter2{color:green;}
.letter3{color:blue;}
.letter4{color:purple;}
HTML:
<span class='letter1'>Z</span>
<span class='letter2'>O</span>
<span class='letter3'>N</span>
<span class='letter4'>E</span>
Following is the html structure, that is repeating inside my html page.
<article class="tweet-inner">
<div class="tweet">
<div class="text">
<p>Coming down! Time for Croation BBQ </p>
</div>
<p class="last">
<span class="pull-right">
<small> Hello this is first text </small>
<small> Hello this is second text </small>
</span>
</p>
</div>
</article>
The above is one unit of repeating structure inside my HTML.
The functionality I want is, when you hover over the tweet text, .tweet .text p then the content of .last should show.
I did the following :
.last{
display: none;
}
.tweet .text p:hover .last{
display: block;
}
Two doubts :
You should be able to see the .last of only the element upon which you have hovered.
The above is not working, the fiddle is http://jsfiddle.net/EymLT/
Thanks!
Your CSS selector is incorrect. Firstly .last is not a child of .text, and the p element cannot be hovered because it is invisble. Try this:
.tweet:hover .last{
display : block;
}
Updated fiddle
Replace your last style with this:
.tweet .text:hover + .last{
display : block;
}
You can use ~ in CSS
DEMO http://jsfiddle.net/kevinPHPkevin/EymLT/4/
.last{
display:none;
}
.text:hover ~ .last{
display : block;
}
If you replace my ~ with > it will be more browser compatable. The > ensures only the child is seleted so you can use a parent div as the hover target.
.last{
display:none;
}
.tweet:hover > .last{
display : block;
}
I hover a thumbnail image using CSS-only:
<style type='text/css'>
#like_table td a{z-index:2;}
#like_table .tooltip
{
position: relative;
z-index:1;
}
#like_table .tooltip a
{
z-index:2;
}
#like_table .tooltip span
{
z-index:9999;
display:none;
}
#like_table .tooltip:hover span
{
position:absolute;
display:block;
top:1.5em;
left:2em;
border:1px solid black;
background-color:white;
padding:0.2em;
}
#like_table td .tooltip .tooltip_thumb{
z-index:99999;
}
</style>
<table id='like_table' class='smallfont' border='0' cellpadding='0' cellspacing='0'><tr><td>
<div class='like_row'>
<a href='#user1' class='nul'>User 1</a> liked <a href='#link' class='tooltip'>forum post<span><img src='image.jpg' class='tooltip_thumb' alt='' /></span></a>
<span class='by_user'>by <a href='#user2' class='nul'>User 2</a></span>
</div>
</td>
</tr>
Unfortunately, the z-index on the span and the hover image does not seem to work.
The image is shown "below" the username (with class by_user), but above the normal text.
How can I make the overlay / tooltip show on top?
Your z-index will not work because all these items are not on the same level. They are all nested in each other. Z-index only works on elements on same level in DOM like this:
<div class="level1">
<span class="level2"> 1 </span>
<span class="level2"> 2 </span>
<span class="level2"> 3 </span>
</div>
that will work if you set z-index on the spans, but if you put on it will have no effect because it is "upper" element.
edit: and in your css you have written .tooltip a but you have no <a> in .tooltip, so you ment a.tooltip i suppose.
Remove all your current z-index and just leave the z-index: 9999 on .tooltip