Only Firefox seems to ignore the bottom: 0; declaration. Even when I try to set the height of the h1:before element to 100%, it won't change anything in Firefox.
Is there any explanation for this behaviour and is there any workaround out there?
Chrome screenshot
Firefox screenshot
.title {
position: absolute;
}
.title h1 {
position: relative;
display: inline;
color: #fff;
line-height: 0.8;
white-space: pre-wrap;
border-top: 0.3em solid #0089C0;
border-bottom: 0.1em solid #0089C0;
background-color: #0089C0;
}
.title h1:before {
content: "";
background-color: red;
display: inline-block;
width: 0.3em;
height: 100%;
padding-top: 0.1em;
position: absolute;
left: -0.3em;
top: 0;
}
.title h1:after {
background-color: #0089C0;
}
.title h1 span {
position: relative;
z-index: 1;
}
<div class="title">
<h1><span>Almost before <br>we knew it, we had <br>left the ground. </span></h1>
</div>
Set the .title h1 to display: inline-block; like this:
.title h1 {
position: relative;
display: inline-block;
}
Or...set the position to fixed like this:
.title h1 {
position: fixed;
display: inline;
}
Related
Hi I have a unique problem I want to hide content of my li on small screen. I know we have properties like display:none visibility:hidde or color:transparent. But i dont want that. I want complete removal of content but I want to apply ::before and ::after selector.
Here is my html
<ul>
<li>Job posted</li>
<li>Offers received</li>
</ul>
My css
li {
list-style: none;
float: left;
width: 20%;
position: relative;
text-align: center;
color: red;
font-size: 1.4rem;
}
li::before {
content: counter(step);
display: block;
width: 3rem;
height: 3rem;
line-height: 1.2rem;
border-radius: 50%;
text-align: center;
margin: 0 auto 1rem auto;
counter-increment: step;
background-color: yellow;
color: red;
box-sizing: border-box;
border: 0.5rem solid red;
font-size: 1.2rem;
padding-top: 0.4rem;
padding-bottom: 0.2rem;
}
li::after {
content: '';
position: absolute;
height: 0.1rem;
width: 100%;
top: 1.5rem;
background-color: green;
left: 45%;
z-index: -1;
}
make li font size 0 your ::after ::before will be as it is and your text of li will not display.
#media(max-width: 767px){
li{
font-size: 0;
}
}
add this code
html
<ul>
<li><span>Job posted</span></li>
<li><span>Offers received</span></li>
</ul>
css
#media only screen and (max-width:767px){
li span{
display:none;
}
}
content:initial will remove the content itself and hence other properities will also be not applied.
li:after{
content:initial;
}
My problem is that the :after element is on the text in an element. Here is an example:
On CodePen
I want the :after to be below the text.
How can I fix this?
body {
text-align: center;
}
a {
display: inline-block;
text-decoration: none;
padding: 10px;
background: #222;
color: #f3f3f3;
font-size: 2em;
margin: 20px auto;
position: relative;
}
a:after {
content: "";
width: 100%;
height: 50%;
background: #00A3A3;
position: absolute;
left: 0;
top: 0;
}
Home page
Just change top:0 to top:50px; in after css. By keeping top:0
The top property sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor.
you are making the element to stay on the top by keeping it 0
body {
text-align: center;
}
a {
display: inline-block;
text-decoration: none;
padding: 10px;
background: #222;
color: #f3f3f3;
font-size: 2em;
margin: 20px auto;
position: relative;
}
a:after {
content: "";
width: 100%;
height: 50%;
background: #00A3A3;
position: absolute;
left: 0;
top: 50px;
}
Home page
Use top: 100% on the :after pseudo element to place it exactly below the main element.
body {
text-align: center;
}
a {
display: inline-block;
text-decoration: none;
padding: 10px;
background: #222;
color: #f3f3f3;
font-size: 2em;
margin: 20px auto;
position: relative;
}
a:after {
content: "";
width: 100%;
height: 50%;
background: #00A3A3;
position: absolute;
left: 0;
top: 100%;
}
Home page
I want to get some practice with pseudo elements in combination with transitions and animations. But I have one little problem.
Have a look at this:
HTML:
<nav id="navBar" class="clearfix">
Test
</nav>
CSS:
.clearfix:after {
content: ".";
clear: both;
display: block;
visibility: hidden;
height: 0px;
}
#navBar {
width: 100%;
padding: 30px;
border-top: 1px solid #808080;
border-bottom: 1px solid #808080;
box-sizing: border-box;
}
#navBar a {
text-decoration: none;
display: inline-block;
}
a.nav {
padding: 10px;
background-color: #7492b6;
color: #fff;
float: left;
font-weight: bold;
font-size: 1em;
min-width: 150px;
text-align: center;
}
a.nav::before {
content: "";
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 3px;
background-color: #fff;
padding: 0;
}
a.nav::after {
content: "";
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 3px;
background-color: #fff;
padding: 0;
}
http://codepen.io/anon/pen/rVbeLa
the two red lines are my pseudo elements. But I want them to have width 100% but it's not working in combination with the padding.
It should look like this but then I have no padding :/
http://codepen.io/anon/pen/RPOaRj
I have tested it on Firefox 39 and Chrome 43, both on OSX yosemite. Result is the same on both.
Any Idea how this problem could be solved?
Cheers
You can fix that by doing this.
Add position:relative; to the <a>:
#navBar a {
text-decoration: none;
display: inline-block;
position:relative;
}
Then, change your :before and :after to position:absolute; and change their position from top and bottom:
.navGroup1 a.nav::before {
content: "";
display: block;
position: absolute;
top: 10px;
left: 0;
width:100%;
height: 3px;
background-color: red;
}
.navGroup1 a.nav::after {
content: "";
display: block;
position: absolute;
bottom:10px;
left: 0;
width: 100%;
height: 3px;
background-color: red;
}
Updated Codepen
I have a wired problem, i have a regular nav with ul and li and i am trying to make after one of the li red box with number inside, but the problem is that the number from some reason going out of the box, what is the problem?
This is the code:
#mainHeader .rightNav {
float: right;
li {
position: relative;
}
img {
vertical-align: middle;
}
li:nth-child(4)::after {
content:attr(data-value);
color:#fff;
border-radius: 2px;
background-color: #d94a3e;
text-align: center;
width: 18px;
height: 18px;
position: absolute;
top:0;
right:0;
}
}
http://plnkr.co/edit/ys7Wy3EJPlA4VlXDt6hE?p=preview
There was wrong on your line height.
Should have : line-height: normal;
Add that to #mainHeader .rightNav li:nth-child(4)::after
Update your css to this:
#mainHeader .rightNav li:nth-child(4)::after {
content: attr(data-value);
color: #fff;
border-radius: 2px;
background-color: #d94a3e;
text-align: center;
width: 18px;
height: 18px;
position: absolute;
top: 0;
right: 0;
line-height: normal;
}
Sample link
Replace your styles with this:)
#mainHeader .rightNav li:nth-child(4)::after {
content: attr(data-value);
color: #fff;
border-radius: 2px;
background-color: #d94a3e;
text-align: center;
position: relative;
top: -10px;
right: 0;
padding: 1px 4px;
}
This is probably a simple question but:
How can I make a title using any headling tag but I want the title between to lines like this:
HTML :
<h4>Staging Server</h4>
Illustration :
You could use :after and :before :pseudo-elements.
h4 span {
position: relative;
color: #00C8FF;
padding: 0 15px;
margin: 0 80px;
font-size: 16px;
font-weight: 100;
}
h4 span:before, h4 span:after {
content: '';
position: absolute;
width: 60%;
height: 1px;
transform: translateY(-50%);
top: 50%;
background: #6F6F6F;
left: -60%;
}
h4 span:after {
left: 100%;
}
<h4><span>Staging Server</span></h4>
Literally the first result on Google...
body
{
background-color: black;
color: white;
}
.subtitle {
margin: 0 0 2em 0;
}
.fancy {
line-height: 0.5;
text-align: center;
}
.fancy span {
display: inline-block;
position: relative;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid white;
border-top: 1px solid white;
top: 0;
width: 600px;
}
.fancy span:before {
right: 100%;
margin-right: 15px;
}
.fancy span:after {
left: 100%;
margin-left: 15px;
}
<p class="subtitle fancy"><span>A fancy subtitle</span></p>
Taken from here.
<fieldset style="border:none; border-top: 1px solid #999;">
<legend style="text-align:center;"> Staging Server </legend>
</fieldset>
http://jsfiddle.net/3qcpjgxw/
Simple example could be like this:
<hr><h4>Staging Server</h4><hr>
And a little CSS tweak:
hr, h4 {
display:inline-block;
}
hr {
width:30%;
}