This question already has answers here:
CSS :after not adding content to certain elements
(5 answers)
Closed 8 years ago.
I am styling the <hr> element with an pseudo element but Internet Explorer 11 doesn't support it.
This is how it should look like:
http://oi57.tinypic.com/23rsio2.jpg
hr {
height:1px;
background-color:#D1D1D1;
border:0; margin:30px 90px;
}
hr:after {
background:url('../images/hr.png') no-repeat top center;
content:"";
display:block;
height:30px;
position:relative;
top:-15px;
}
I hope someone can help me.
Thanks in advance!
Psuedo-elements are handled as children of the element they are attached do.
<hr>
<psuedo-element-after> image here </psuedo-element-after>
</hr>
This is not valid, because <hr /> doesn't allow children. Therefore, it won't work.
Consider applying the background image to the <hr /> itself, or use something like a class to do it, like this: <div class="divider"></div>
Related
This question already has answers here:
Does :before not work on img elements?
(16 answers)
Closed 3 years ago.
I have tried to get after pseudo for image but nothing appears ,Is this a wrong way or we can't have :after :beforfe for inline elements.
img:after{
position:absolute;
width:100%;
height:100%;
background:red;
right:-100%;
}
img{
position:relative;
}
<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSkokrxxIX-EDiBFHl7z-gDrIscZSa2KDgl5Xm1-31053Zb1yvb"/>
There are a few basics you need to know like, use of content:'' and figure.
figure:after{
content:''; /*if you are using :after or :before you have to use content*/
position:absolute;
width:100%;
height:100%;
background:red;
right:-100%;
}
figure{
position:relative;
width: 400px; /*just for test*/
}
<figure> <!-- HTML5 :) -->
<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSkokrxxIX-EDiBFHl7z-gDrIscZSa2KDgl5Xm1-31053Zb1yvb"
>
</figure>
I respect all answers but it doesn't work with img tag, you have to use a parent to make it work with img tag. Although it works with other inline tage like a,span etc. Hope it will help you.
One thing please do add content:""; whenever you do css for before and after
Thanks
yes this is wrong way to use ::after & ::before you can add a parent div of img than you can use ::before and ::after
This question already has answers here:
Same padding at start and end of each line
(2 answers)
Add padding at the beginning and end of each line of text
(8 answers)
Closed 8 years ago.
I have a div which width is 46%. There is a h1 tag. The text of h1 tag is broken when text is longer. but i want to use same left padding for the second line.
I attached an image and css for better understanding. Is there any solution.
Here is Html
<div class="header-tite">
<h1>An Epidemic 37 Years in the Making</h1>
</div>
Here is the CSS
.header-tite{
width:45%;
float:left;
position:absolute;
left:95px;
bottom:42px;
z-index:1;
}
.header-tite h1{
font-family: 'gotham_bookregular';
font-size:55px;
font-weight:normal;
color:#191919;
line-height:68px;
padding:0px 10px 0px 10px;
background:#FFFFFF;
display:inline;
opacity:0.85;
}
Here is output
I want same gap before Y.
Do not use display: inline on block elements if you need to archive this. If you really have to, you might need to use a span tag inside your h1 tag to style the extra text separately. I wouldn't suggest you mind the gap, especially if you plan this text to be dynamic, but if this text is in your full control then you can use the span tag for additional styling, have a look here http://jsfiddle.net/Wandile/5wy9o5zs/2/ hope this helps.
This question already has answers here:
CSS3 transform on click using pure CSS
(8 answers)
Closed 9 years ago.
Is it possible to affect one element by another element? I want to move .box element when I click on the link a.link.
I tried this, But couldn't get it to work. What should I write at link:active?
<html>
<head>
<style>
.box
{
height:100px;
width:200px;
border:solid red 5px;
}
.link:hover
{
color:red;
}
.link:active
{
color:grey;
}
</style>
</head>
<body>
<a href="#" class=link >CLICK ME</a>
<div class=box></div>
</body>
</html>
It's possible using sibling/child selectors. The selector has to include the element you're taking action on.
When you click on .link, you want .box to move. They're next to each other, so you can use the adjacent sibling selector .link:active + .box.
You can use transitions to animate the movement.
see: http://jsfiddle.net/2P4aA/2/
This question already has answers here:
Is there any way to hover over one element and affect a different element? [duplicate]
(2 answers)
Closed 9 years ago.
im trying to write a code where you hover over a div and have a completely different div change its effect
heres my code
html
<div class="a">LOREM IPSUM</div>
<div class="boxhighlight"></div>
css
.a:hover, .boxhighlight
{
background-color:black;
}
what i want to happen is that when the user hovers over the word lorem ipsum, the div boxhighlight will change its background color
is there a way to do this?
thanks
Use like this
<div class="a">LOREM IPSUM</div>
<div class="boxhighlight" >asdf</div>
Your css
.a:hover ~ .boxhighlight {
background-color:black;
color: white;
}
See this for your Reference
See example in this Fiddle
Change the selector to this:
.a:hover + .boxhighlight {
background-color:black;
}
The selector changes the styles of the element that has class boxhighlight that next to .a when hovered.
This question already has answers here:
How to position the legend inside a fieldset with a border? [duplicate]
(10 answers)
Closed 9 years ago.
In a classical form, we have the legend tag on the same line of the top border like showed below.
The code is:
...
<fieldset>
<legend>Connexion</legend>
...
</fieldset>
Is it possible to move this legend lower in the formular like showed below?
Any idea what is the CSS ?
Thanks.
UPDATE
Below is the result after applying the following CSS:
fieldset {
position:relative;
}
legend {
top:20px;
position:absolute;
font-size:20px;
font-weight:bold
}
How to add more space after the legend 'Connexion' ?
You sure can do this with CSS. Without using absolute positioning you end up with a big gap in the fieldset border.
fieldset {
position:relative;
}
legend {
top:50px;
position:absolute;
font-size:20px;
font-weight:bold
}