I have a single div element which I want to insert content into depending on it's class.
I am able to insert 2 elements into this div using the :before and :after attributes in the CSS, but I need to be able to insert at least 5 elements.
Here's what I have for 2:
div {
background: blue;
margin: 0 auto;
width: 50px;
height: 50px;
padding: 0;
display:table-cell;
vertical-align:middle;
text-align: center;
}
div:after {
content:'';
display:block;
border:1px solid #000;
width:40px;
height:40px;
margin:5px auto;
background-color:#DDD;
}
div:before {
content:'';
display:block;
border:1px solid #000;
width:40px;
height:40px;
margin:5px auto;
background-color:#DDD;
}
Is there any way I can create extra :before and :after? Something like div:after:after.
Nope, Sorry you can't
Useful to read : http://css-tricks.com/use-cases-for-multiple-pseudo-elements/
Just add some element inside your element
HTML :
<div>
<div>
</div>
</div>
CSS :
div:after {
content:'1';
}
div > div:after {
content:'2';
}
As Paulie_D comments you can't get :after:after in CSS.
Although you could do it in jQuery by Chaining
$("div").prepend(" *before* ").prepend(" *before before* ").append(" *after* ").append(" *after after* ");
See JSFiddle here
Although it uses jQuery it's a bit more valid a solution, as really you should just use :before and :after CSS selectors for styling.
Related
I have the following problem and it drives me crazy:
Basicly I have a div-container with an background. This background should change when I hover it (see pichture). It is an png and instead of white it should turn red.
What I have done until now:
First: CSS sprite
Thought it will be the best solution but becuase the div changes it's size (responsive) and the icon does not have a fixed size it was not very clean: I had a small offset on hovering. Not sure why… mybe this can be fixed…
Second: 2 separate images
But this is not an option in this case because I need to work with inline styles. :hover ist not available as inline style.
Thrid: tried mask-box-image
Was a woderful solution… but Firefox does not support it.
Does anyone has another idea how to solve it?
Give This a Try
CSS
.icon-cont{
height:300px;
width:300px;
background-color: #ff0000;
text-align:center;
}
.icon-cont:hover{
background-color: transparent;
}
.icon-cont:hover .icon,
.icon-cont:hover .icon::before,
.icon-cont:hover .icon::after
{
border-color:#ff0000;
}
.icon{
height:0px;
border-bottom:2px solid #fff;
width:60%;
line-height:300px;
position: relative;
margin:auto;
top:50%;
}
.icon::before{
content:"";
position: absolute;
top:0;
bottom: 0;
left:-30px;
margin:auto;
height:20px;
width:20px;
border:2px solid #fff;
border-radius:50px;
}
.icon::after{
content:"";
position: absolute;
top:0;
bottom: 0;
right:-30px;
margin:auto;
height:20px;
width:20px;
border:2px solid #fff;
border-radius:50px;
}
HTML
<div class="icon-cont">
<div class="icon"></div>
</div>
Link for reference
hope this helps..
May be it will help
I posted an example following
.box {
padding: 20px;
display: inline-block;
background:tomato;
}
.box:hover {
background: transparent;
}
.box:hover span {
color: tomato;
}
.box span {
display: inline-block;
color: #fff;
}
<div class="box">
<span>a</span>
<span>----</span>
<span>b</span>
</div>
You can't change color of .png with css. I think you should make a font out of your icons in order to change their color with css later.
I haven't done that myself, but I know those fonts, like font-awesome can change color. There are some automatic generators in google to make your own font.
Try this.
Switching from tables to divs for layout purposes sounds an attractive decision, yet it's very painful. I haven't still been able to use float and oveflow properly to get divs aligned properly. Here are I have the following html and css:
HTML
<div class="div-row">
<div id="divOfficers" class="div-column">DIVOFFICERS</div>
<div id="divTasks">DIVTASKS</div>
CSS
.div-row {
width:100%;
overflow:clear;
margin-bottom:5px;
}
.div-column {
margin-right:3px;
float:left;
}
#divOfficers {
border:3px solid red;
height:80px;
width:200px;
color:red;
}
#divTasks{
width:300px;
height:80px;
border:10px solid orange;
color:orange;
}
Basically, I need the divTasks to stand right to the divOfficers, but without stretching over it. But here's what I get:
I've cleared the overflow in the parent div but as you can see that does not help. What else do I have to do?
just give a float:right to divtasks as well as you did float:left with divofficers. if it is what you want than your problem solved or let me know if you need something else to do and put your code on jsfiddle please as it will help a lot
Try use CSS3 code, If you use float maybe have problem with long content
.div-row {
width:100%;
overflow:clear;
margin-bottom:5px;
display: table;
}
.div-column {
margin-right:3px;
}
#divOfficers {
border:3px solid red;
height:80px;
width:200px;
color:red;
display: table-cell;
}
#divTasks{
width:300px;
height:80px;
border:10px solid orange;
color:orange;
display: table-cell;
}
Demo: http://jsfiddle.net/vsok/dqmdv7oa/
Yeah, my titles suck :p
So I have a container, which contains <div>s. Dotted in this container are <span>s that mark off labels. These <span>s have position:absolute to make them not interfere with the layout of the <div>s.
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
}
#container>span {
position:absolute;
background:#ccf;
}
<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><span>Marker</span><div></div><span>Marker</span><div></div><div></div></div>
In Internet Explorer, this works fine.
In Chrome, it does not. The label falls out of the box.
I understand why this happens - it's because the <span> has zero width and height within the flow of the document, allowing it to squeeze into the zero remaining space.
But I'm wondering if there's any other way to achieve the effect I want here?
EDIT: Desired effect, Chrome's bad effect
don't really quite get where you want them, something like this ? added display block to the span.
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
}
#container>span {
display:block;
position:absolute;
background:#ccf;
}
<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><div></div><span>Marker</span><div></div><div></div></div>
strong text
Borrowing ideas from #Billy and with help from #JacobGray in the comments, the following solution applies display:block to <span>s, but only if the immediately follow an Nth <div>, N being the number of columns.
It works, but I'm not too happy with it being dependent on a constant number of columns - not great for responsive design ;) Better solutions are of course welcome.
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
}
#container>span {
position:absolute;
background:#ccf;
}
#container>div:nth-of-type(3n)+span {
display:block;
}
<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><span>Marker</span><div></div><span>Marker</span><div></div><div></div></div>
Adding display:block to the span is what I'd suggest, or putting a marker span inside every div you want to label.
If I understand well, try this. Put tags <span> into each <div> that you want have a "label". Add position:relative to all <div> and set the properties top and left for the span.
Ps. I've modified your code below, but you should use classes
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
position: relative;/* added */
}
#container>div>span {/* modified */
position:absolute;
background:#ccf;
top:-5px;/* added */
left:-5px;/* added */
}
<div id="container"><div><span>Marker</span></div><div></div><div><span>Marker</span></div><div><span>Marker</span></div><div></div></div>
Is this possible to create following effect using CSS. I only have a H2 element in HTML, and i do not have any control on HTML of the page. I can only change CSS.
I tried it with :before and :after but no success so far.
This will be used in a CMS, so i can not be sure how or where end user will be adding headings.
I think your best shot would be (since you cannot edit any of the HTML and you want a CSS only solution) to play a little with the position and z-index of the container and the h2:after pseudo element:
HTML:
<div id="wrapper">
<h2 class="heading">New Collection </h2>
</div>
CSS:
#wrapper {
width:100%;
height:800px;
background:green;
position:relative;
z-index:-2;
}
.heading {
display:inline;
background:green;
}
.heading:after {
content:'';
display:inline-block;
width:100%;
height:20px;
background:#d3d3d3;
position:absolute;
right:0;
z-index:-1;
}
Check this FIDDLE, I know it's not that fancy, but I think you cannot do more than that using CSS only.
Hope this helps.
The simplest way that I know of is to put a span inside of the H2, but still around the inner text, then apply one style to the span and one style to the H2.
EDIT: You can use a little bit of jQuery to add the span inside your H2 tags.
HTML:
<h2><span>New Collection</span></h2>
CSS:
h2 {
font-family: sans-serif;
font-weight: normal;
font-size: 16px;
background: #eee;
color: #999;
}
h2 span {
padding-right: 10px;
background: #fff;
}
jQuery:
$(document).ready(function() {
$('h2').each(function() {
var title = $(this).html();
$(this).html('<span>' + title + '</span>');
});
});
Here's a Demo
I am looking for the easiest, most maintainable way to do this:
These are text slugs that will be appended to certain images throughout the site. They all say this same thing, but the images are varied and come from a CMS.
I know how I would do it with the image set to position relative and a div with "there's a better way" in an absolutely positioned child div.
However, since that requires HTML added to every image that gets this treatment, I was looking for a way to do this with a css class using the :before pseudo element. So far, applying the class to a wrapping link has no effect:
<img src="imagepath" alt="">
.tabw img:before {
content: 'theres a better way';
color: red;
font-size: 18px;
}
Is this sort of thing possible? Having the whole thing in CSS means all I have to do is have the CMS apply the class attribute when needed.
Yeah, ::before and ::after don't work on images. But you can apply them to the wrapper
link:
a{
position: relative;
}
a, a > img{
display:inline-block;
}
a::before{
content: 'theres a better way';
position: absolute;
left: 0;
top: 0;
width: 80%;
height: 20px;
left: 10%;
background: #000;
opacity: 0.4;
color: red;
font-size: 18px;
}
demo
If you want the text added in the HTML, you'll have to put a real element with it in your link (and apply the same rules to it, but without content)
I'll do it like this with jQuery :
Html
<div class="thumb">
<img src="http://www.zupmage.eu/up/NvBtxn7LHl.png" alt="cover"/>
<div class="caption">My caption</div>
</div>
Css
.thumb {
position:relative;
width:230px;
height:230px;
}
.thumb img {
max-width:100%;
}
.thumb .caption {
display:none;
position:absolute;
top:0;
height:20px;
line-height:20px;
width:100%;
text-align:center;
background:rgba(255,255,255,0.5);
}
JQuery
$('.thumb').hover(function() {
$(this).find('.caption').fadeIn();
}, function() {
$(this).find('.caption').hide();
});
See fiddle
NOTE TO ANYONE FINDING THIS THREAD: In Firefox 21 and IE 9/10 this did not work right with oversized images. It forced the images to 100% even if globally set to max-width: 100%
I had to follow the answer I selected above but set the A tag to display:block instead of display:inline-block to fix.