I've been playing around with this, and I thought it would be pretty simple. What I'm trying to do is hover over the 'NEW' label. Once in its hover state, change the content from 'NEW' to 'ADD' using only CSS.
body{
font-family: Arial, Helvetica, sans-serif;
}
.item{
width: 30px;
}
a{
text-decoration:none;
}
.label {
padding: 1px 3px 2px;
font-size: 9.75px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
white-space: nowrap;
background-color: #bfbfbf;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-decoration: none;
}
.label.success {
background-color: #46a546;
}
.item a p.new-label span{
position: relative;
content: 'NEW'
}
.item:hover a p.new-label span{
display: none;
}
.item:hover a p.new-label{
content: 'ADD';
}
<div class="item">
<a href="">
<p class="label success new-label"><span class="align">New</span></p>
</a>
</div>
Here's a JSFiddle to show you what I'm working with.
The CSS content property along with ::after and ::before pseudo-elements have been introduced for this.
.item:hover a p.new-label:after{
content: 'ADD';
}
JSFiddle Demo
This exact example is present on mozilla developers page:
::after
As you can see it even allows you to create tooltips! :) Also, instead of embedding the actual text in your CSS, you may use content: attr(data-descr);, and store it in data-descr="ADD" attribute of your HTML tag (which is nice because you can e.g translate it)
CSS content can only be usef with :after and :before pseudo-elements, so you can try to proceed with something like this:
.item a p.new-label span:after{
position: relative;
content: 'NEW'
}
.item:hover a p.new-label span:after {
content: 'ADD';
}
The CSS :after pseudo-element matches a virtual last child of the
selected element. Typically used to add cosmetic content to an
element, by using the content CSS property. This element is inline by
default.
.label:after{
content:'ADD';
}
.label:hover:after{
content:'NEW';
}
<span class="label"></span>
This little and simple trick I just learnt may help someone trying to avoid :before or :after pseudo elements altogether (for whatever reason) in changing text on hover. You can add both texts in the HTML, but vary the CSS 'display' property based on hover. Assuming the second text 'Add' has a class named 'add-label'; here is a little modification:
span.add-label{
display:none;
}
.item:hover span.align{
display:none;
}
.item:hover span.add-label{
display:block;
}
Here is a demonstration on codepen: https://codepen.io/ifekt/pen/zBaEVJ
Related
Using only CSS, I'm trying to set a list of links to have a exclamation mark next to them if they are 'unvisited' links, and a check box next to them if they have been visited. The former works fine, but when the links have been visited, the tick box doesn't appear. My CSS is as follows:
.journey-table td a:link:before {
content: "\f071";
font-family: FontAwesome;
padding-right: 5px;
}
.journey-table td a:visited:before {
content: "\f14a";
font-family: FontAwesome;
padding-right: 5px;
}
Any help would be greatly appreciated.
According to this page, the styling of a :visited element, has been made very limited, for privacy reasons. Because of this, any child elements or pseudo elements of a visited link will be styled like an unvisited link.
I've created an example for you to understand
a:before {
background-color: blue;
content: "";
display: block;
height: 25px;
width: 25px;
float: left;
margin-right: 10px;
}
a:hover:before {
background-color: red;
}
this is a link
I am inserting a FontAwesome icon along with some text from the data attribute in a div pseudo element:
<div data-date="Mar 01, 2016"></div>
div:before {
content: "\f073" attr(data-date);
font-family: "FontAwesome", sans-serif;
}
https://jsfiddle.net/cn0vhns9/
Now what I want is to increase the size of the icon and put the text right under it with some margin. While putting the text content under the icon seems achievable (if I fix the width of the pseudo element), I can't think of the way to increase the size of the icon without increasing the size of the text content as well. Any ideas?
It is possible even in your case. Please, see the updated fiddle at https://jsfiddle.net/cn0vhns9/3/. You will have to style the icon as a pseudo-element (::first-letter, or alternatively :first-letter with just a single semicolon for compatibility reasons).
My answer only demonstartes the problem with different font-size.
CSS
div:before {
content: "\f073" attr(data-date);
font-family: "FontAwesome", sans-serif;
padding: 20px;
color: black;
font-size: 20px;
}
div::first-letter {
font-size: 40px;
font-family: "FontAwesome", sans-serif;
}
HTML
<div data-date="Mar 01, 2016">
</div>
However, I consider this solution to be a bit hacky. Most likely I would separate the icon and the date and place each of them into a separate HTML tag if possible.
You can use another pseudo element:
div:before {
content: "\f073" ;
font-family: "FontAwesome", sans-serif;
padding: 20px;
color: black;
font-size:2em;
}
div:after
{
content:attr(data-date);
display:block;
border-top:1px solid black;
}
I have several hundreds of icons around a legacy application:
<img class="date-picker" src="/image/datepicker.png">
Following CSS removes the datepicker.png but the font awesome icon is not displayed
.date-picker {
background-image: none;
}
.date-picker:after{
font-family: FontAwesome;
content: "\f073";
color:grey;
font-size:25px;
}
Is there a way how to achieve this without changing the IMG tags?
Pseudo-elements only get applied to images whose src attributes fail to load. If the image successfully loads, the pseudo-element will not be used.
One thing you can do is apply this to the parent element, but this obviously depends on your markup:
div {
height: 100px;
width: 100px;
position: relative;
}
div img {
display: none;
}
div::after {
content: 'foo';
position: absolute;
top: 0;
}
<div>
<img src="http://placehold.it/100x100" />
</div>
Here we hide the img element and apply the pseudo-element to the div container, then absolutely-position the pseudo-element to sit inside (well, on top of) the div.
You could wrap the image in a span and use the same class(es).
img.date-picker {
display: none;
}
span.date-picker:after {
font-family: FontAwesome;
content: "\f073";
color: grey;
font-size: 25px;
display: inline-block;
margin: 1em;
/* demo only */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet" />
<span class="date-picker"><img class="date-picker" src="/image/datepicker.png"></span>
Using jquery you can find all the img tag and wrap the img in a figure tag and apply the icon class to that.
Is there a way to display a line next to a header using CSS? Here's an image of what I'm talking about:
I could do it with a static background image, but that'd require custom CSS for every heading. And I could do some hacky stuff using :after and background colors on the h1, but it wouldn't look right against a gradient background.
I'd like to do this with CSS, not JavaScript. If it doesn't work in older browsers, that's fine.
UPDATE:
In the past I've done something like this:
<h1><span>Example Text</span></h1>
h1 {background-image:url("line.png");}
h1 span {background-color:#FFF;dislpay:inline-block;padding-right:10px}
While that works, it's hacky, and it doesn't work well with gradient backgrounds, because the span has to have a solid background color.
What I'm really looking for is something like this:
<h1>Example Text</h1>
h1 {background-image:url("line.png");} /* but don't appear under the example text */
I misspoke about the :after thing in the original post, I was thinking of another issue I had in the past.
You could do something like the following:
HTML
<div class="border">
<h1>Hello</h1>
</div>
CSS
h1 {
position: relative;
bottom: -17px;
background: #fff;
padding-right: 10px;
margin: 0;
display: inline-block;
}
div.border {
border-bottom: 1px solid #000;
}
Here is the JsFiddle to the above code.
After doing some more research, I think I found the best solution:
h2 {
color: #F37A1F;
display: block;
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: bold;
line-height: 25px;
margin: 0;
text-transform: uppercase;
}
h2:after {
background: url("../images/h2.png") repeat-x center;
content: " ";
display: table-cell;
width: 100%;
}
h2 > span {
display: table-cell;
padding: 0 9px 0 0;
white-space: nowrap;
}
Modified from: How can I make a fieldset legend-style "background line" on heading text?
It still requires some extra markup, unfortunately, but it's the most minimal that I've found. I'll probably just write some jQuery to add the span automatically to the h2s.
Here is one way of doing it.
Start with the following HTML:
<h1>News<hr class="hline"></h1>
and apply the following CSS:
h1 {
background-color: tan;
display: table;
width: 100%;
}
.hline {
display: table-cell;
width: 100%;
padding-left: 20px;
padding-right: 20px;
border: none;
}
.hline:after {
content: '';
border-top: 1px solid blue;
width: 100%;
display: inline-block;
vertical-align: middle;
}
See demo at: http://jsfiddle.net/audetwebdesign/Dsa9R/
You can repurpose the hr element to add the line after the text.
The advantage here is that you don't have to wrap the text with some other element.
Note: You can rewrite the CSS selectors and avoid declaring a class name and save a bit of typing.
I want to have some css properties on input:focus so how can I do that?
My scenario is; when input get focus I want to show another div so how can I do that using only css?
On hover I can do that using ">" but on focus is not working and I don;t understand why :(.
so this is my code:
<div class="containerTooltipXxx">
<p class="paragraphClass">
Some text...<br /><input type="radio" /><br />More text...
</p><div class="blocks">
<label>Field</label> <input></input></div>
</div>
.containerTooltipXxx{
padding: 20px;
position: relative;
float: left;
display: inline-block;
border: 2px solid lime;
margin: 50px;
}
.paragraphClass{display: none;}
.containerTooltipXxx:hover > .paragraphClass, .containerTooltipXxx:focus > .paragraphClass{
display: block;
position: absolute;
top:-5px;
left: 50px;
background: red;
opacity:.9;
}
very important, the html hierarchy cannot be changed.
Thank you.
fiddle
using CSS you can only point to the next sibling elements. Here since the p tag is out of the parent div it is not possible using css.
I know that you don't want to change the HTML order but still I am showing it for example.
Moving p tag inside the div.blocks can do this with only CSS
.blocks input[type="text"]:focus ~ .paragraphClass {
display: block;
position: absolute;
top:-50px;
left: 50px;
background: #ccc;
opacity:.7;
}
DEMO
.containerTooltipXxx:hover > replace this by
.containerTooltipXxx:focus ~ .paragraphClass
{
display: block;
position: absolute;
top:-5px;
left: 50px;
background: red;
opacity:.9;
}
Your first hover selector is fine, but the second is wrong.
What you are doing with .containerTooltipXxx:focus > .paragraphClass, is selecting the immediate child .paragraphClass from a focused .containerTooltipXxx. Focus can only be used on things with input, and your container is just a div.
What you would need is a parent selector, but these are currently not available. They will be most likely in CSS4. http://www.w3.org/TR/selectors4/#subject
Currently, your best bet would be using javascript. Make an event listener for focus on the input box, and then programmatically apply a visible class to what you want to show.