I try to get the same wave symbol underneath my headers as shown in this website http://harbr.co/ but it's not working. So far, I have the following CSS:
H2::after {
content: url ('images/wave.png');
position: absolute;
}
Help?
body { background-color: gray; }
h2:after {
content: "";
width: 42px;
height: 8px;
background: url('http://harbr.co/wp-content/themes/harbr2015/img/icons/divWave-sprite.png');
background-size: 100px 250px;
background-position: -50px -50px;
position: absolute;
top: 1em;
}
<h2></h2>
You have an extra space between url and (.
H2::after {
content: url('images/wave.png');
position: absolute;
}
https://jsfiddle.net/qst68fLd/
Related
Trying to display a little chevron as an psuedo after element but I can't get it to display for some reason. I've tried playing the z-index but that doesn't do anything for the image one way or another. Any ideas what I'm doing wrong here? This is essentially what I want it to look like:
<div class="post-arrow post-arrow--left"></div>
<div class="post-arrow post-arrow--right"></div>
.post-arrow {
position: relative;
height: 80px;
width: 80px;
z-index: 0;
border-radius: 50%;
background-color: rgba($color-black, .9);
&--right {
&::after {
position: absolute;
display: block;
z-index: 1;
background-image: url('../../../lib/images/chevron-right.png');
background-repeat: no-repeat;
content: "";
color: $color-white;
height: 80px;
width: 80px;
}
}
&--left {
&::after {
position: absolute;
display: block;
z-index: 1;
background-image: url('../../../lib/images/chevron-left.png');
background-repeat: no-repeat;
content: "";
color: $color-white;
height: 80px;
width: 80px;
}
}
}
I feel like your fundamental CSS is ok. I boiled your code down to more simplistic CSS, with no dynamic colors or locally references images and it seems to work ok. I'd check your image paths or something else.
.post-arrow {
position: relative;
height: 80px;
width: 80px;
border-radius: 50%;
background-color: red;
display:block;
}
.post-arrow--right::after {
position: absolute;
display: block;
background-image: url('https://www.flaticon.com/svg/static/icons/svg/566/566012.svg');
background-repeat: no-repeat;
content: "";
color: #fff;
height: 80px;
width: 80px;
}
<div class="post-arrow post-arrow--right"></div>
I want to put a coloured circle at the left side of horizontal rule.
Below is what I have used to display a circle at the beginning of a horizontal rule. It works in all modern browsers except IE 11 and Edge. I have tried everything I can think of and search endlessly. Can anyone help?
.leftArticle hr:before {
display: block;
content: "";
width: 12px;
height: 12px;
background: #4990cd;
top: 50%;
margin-top: -7px;
right: -3px;
z-index: 1;
border-radius: 6px;
}
Dont use pseudoelements with hr.
.leftArticle {
position: relative;
}
.leftArticle:before {
position: absolute;
left: 0;
top: 50%;
display: block;
content: "";
width: 12px;
height: 12px;
background: #4990cd;
margin-top: -7px;
right: -3px;
z-index: 1;
border-radius: 6px;
}
<div class="leftArticle">
<hr>
</div>
Display issues:
hr {
height: .9em;
overflow: hidden;
background-color: pink;
}
hr::before {
content: 'demo of this problem';
}
<hr>
I'm trying to put an image on the right and left edges of the container's with the :before and :after.
But for some reason the containers totally .... up when I add a position absolute to the before and afters...
It has probably something to do with the standard bootstrap before and afters on the containers
Any idea how I can go around this?
.header,
.spotlight,
.main,
.footer {
>.container {
position: relative;
&:before {
content: " ";
position: absolute;
background: url("../img/right.png");
height: 100%;
display: block;
width: 6px;
right: -6px;
z-index: 999999;
top: 0;
}
&:after {
content: " ";
position: absolute;
background: url("../img/left.png");
height: 100%;
display: block;
width: 6px;
left: -6px;
z-index: 999999;
top: 0;
}
}
}
Example how the shadow(image) should look
Im using an image sprite with transparency which im applying to pseudo content. I need a coloured rounder border around the image.
This is what I have so far:
http://codepen.io/anon/pen/bpmGaz
<div class="icon"></div>
.icon:after {
content: "";
display: inline-block;
background-color: gold;
background-image: url(http://orig00.deviantart.net/1110/f/2014/143/9/b/mega_man_hd_sprites__transparent_background__by_lunodevan-d7jgruq.png);
background-position: -129px -40px;
height: 100px;
width: 100px;
}
.icon {
margin: auto;
margin-top: 100px;
position: relative;
width: 100px;
}
.icon:before {
content: "";
display: inline-block;
background: gold;
position: absolute;
top: -50px;
left: -50px;
width: 200px;
height: 200px;
z-index: -1;
border-radius: 100%;
}
However I need it to look like this:
I can do this with additional pseudo content (see below) but the code is getting a bit messy. Is there a shorter way to do this?
http://codepen.io/anon/pen/VaEwQy
.icon:after {
content: "";
display: inline-block;
background-color: gold;
background-image: url(http://orig00.deviantart.net/1110/f/2014/143/9/b/mega_man_hd_sprites__transparent_background__by_lunodevan-d7jgruq.png);
background-position: -129px -40px;
height: 100px;
width: 100px;
}
.icon {
margin: auto;
margin-top: 100px;
position: relative;
width: 100px;
}
.icon:before {
content: "";
display: inline-block;
background: gold;
position: absolute;
top: -50px;
left: -50px;
width: 200px;
height: 200px;
z-index: -1;
border-radius: 100%;
}
I tried using the outline property however sadly it doesn't work cross browser with border-radius.
Adding this code to your pseudo-element seems to do the trick:
border: 50px solid gold;
border-radius: 100%;
http://codepen.io/anon/pen/aNRzmE
do not know what I might be doing wrong, I tried to put it this way:
.container-image{
background: url('http://i.imgur.com/Dl8UBO7.png');
width: 226px;
height: 169px;
display: inline-block;
position: relative;
z-index: 20; // dont work
}
.container-image img{
position: absolute;
left: 14px;
top: 13px;
width: 199px;
height: 141px;
z-index: 10; // dont work
}
jsfiddle
I need the image is behind the edge (.container-image)
Put a container around the border div and the image. http://jsfiddle.net/7fqAu/2/
<div class='example'>
<div class="container-image"></div>
<img src="http://i.imgur.com/T0KMwIs.jpg">
</div>
body {
background: red;
}
.container-image {
background: url('http://i.imgur.com/Dl8UBO7.png');
width: 226px;
height: 169px;
position: relative;
z-index: 20;
}
.example {
width: 226px;
height: 169px;
position: relative;
}
.example img {
position: absolute;
left: 14px;
top: 13px;
width: 199px;
height: 141px;
z-index: 10;
}
You could add the border image to .container-image:after instead of as a background to .container-image - no need for z-index at all then.
jsfiddle here