I have a hamburger nav where its top and bottom bars are generated via pseudo before/after selectors. The issue occurs when trying to center it inside a parent element. Although the pseudo selectors center the original div element does not.
HTML
<a class="nav-container" href="##">
<div class="hamburger"></div>
</a>
CSS
html {
text-align: center;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.nav-container {
display: inline-block;
padding: 20px 0;
}
.hamburger {
background: black;
display: inline-block;
position: relative;
height: 5px;
width: 30px;
}
.hamburger:before {
background: #000;
content: '';
position: absolute;
top: -10px;
width: 30px;
height: 5px;
}
.hamburger:after {
background: #000;
content: '';
position: absolute;
top: 10px;
width: 30px;
height: 5px;
}
http://jsfiddle.net/ht1d7y9f/
Actually, I think it's the pseudo elements that are out of position.
.hamburger:before {
background: #000;
content: '';
position: absolute;
top: -10px;
left: 0;
width: 30px;
height: 5px;
}
.hamburger:after {
background: #000;
content: '';
position: absolute;
left: 0;
top: 10px;
width: 30px;
height: 5px;
}
html {
text-align: center;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.nav-container {
display: inline-block;
padding: 20px 0;
text-align: center;
border: 1px solid green;
}
.hamburger {
background: black;
position: relative;
height: 5px;
width: 30px;
}
.hamburger:before {
background: #000;
content: '';
position: absolute;
top: -10px;
left: 0;
width: 30px;
height: 5px;
}
.hamburger:after {
background: #000;
content: '';
position: absolute;
left: 0;
top: 10px;
width: 30px;
height: 5px;
}
<a class="nav-container" href="##">
<div class="hamburger"></div>
</a>
Related
Adding position: fixed; to the navbar breaks margin-left: auto; for the navbar menu icon:
/* Resets */
:root {
--pblack: #1E293B;
--pyellow: #FFE934;
--pwhite: white;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--pblack);
color: var(--pwhite);
font-family: raleway;
}
a {
color: white;
text-decoration: none;
}
/* Resets end */
/* Styling starts */
.logo {
width: 32px;
margin-right: auto;
}
.logo-type {
display: none;
}
.container {
margin: 1rem;
display: flex;
flex-direction: column;
position: relative;
height: 90vh;
}
/* .nav-holder { position: fixed;
} */
.navbar {
position: fixed;
background: transparent;
display: flex;
align-items: center;
z-index: 999;
}
.nav-menu {
position: relative;
background: var(--pyellow);
width: 1.5rem;
height: 2px;
margin-left: auto;
}
.nav-menu::before {
content: " ";
position: absolute;
top: -7px;
right: 0;
background: var(--pyellow);
width: .5rem;
height: 2px;
}
.nav-menu::after {
content: " ";
position: absolute;
top: 7px;
right: 0;
background: var(--pyellow);
width: 1rem;
height: 2px;
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
/* border: 2px solid red; */
text-align: center;
}
.greeting {
font-size: 5rem;
margin-bottom: 0;
}
.hero-name {
font-size: 1.5rem;
}
.hero-anim {
position: relative;
margin: 6rem;
/* border: 2px solid red; */
width: 60%;
/* height: 100px; */
}
.h-love {
position: absolute;
top: 0;
left: 0;
}
.x-anim {
position: absolute;
top: 0;
right: 0;
background: var(--pyellow);
width: 2px;
height: 1rem;
transform: rotate(45deg);
}
.x-anim::after {
content: "";
display: inline-block;
background: var(--pyellow);
width: 2px;
height: 1rem;
transform: rotate(90deg);
}
.h-creating {
position: absolute;
top: 20px;
left: 20px;
font-size: 2rem;
margin: 0;
color: var(--pyellow);
}
.h-amazing {
position: absolute;
top: 65px;
left: 45px;
}
.dash-anim {
position: absolute;
top: 75px;
left: 0px;
width: 1.5rem;
height: 2px;
background: var(--pyellow);
}
.h-details {
margin-left: 3rem;
margin-right: 3rem;
margin-top: 10rem;
}
.know-more-btn {
position: relative;
border: 1px solid var(--pyellow);
border-radius: 50px;
padding: .5rem 2.5rem .5rem 1rem;
width: max-content;
display: flex;
align-items: center;
}
.btn-arrow {
position: absolute;
right: 2px;
font-size: 2rem;
}
.sect2 {
background-color: #FFE934;
width: 100%;
height: 100vh;
}
<body>
<div class="nav-holder">
</div>
<div class="container">
<nav class="navbar">
<img src="/img/Mitcho Icon black yellow.png" alt="logo" class="logo"> <span class="logo-type">Mitcho</span>
<div class="nav-menu"></div>
</nav>
<main class="main-con">
<div class="hero">
<h1 class="greeting">Hello!</h1>
<span class="hero-name">
I'm Mitchell Orutu,
</span>
<div class="hero-anim">
<span class="h-love">I Love</span>
<div class="x-anim"></div>
<span class="h-creating">Creating</span>
<div class="dash-anim"></div>
<span class="h-amazing">Amazing Experiences</span>
</div>
<p class="h-details">A multidisciplinary designer and frontend developer. I'm obsessed with creating amazing experiences and have fun while doing it.</p>
<a href="#" class="know-more-btn">
<span class="know-more-text">Know More</span>
<i class='bx bxs-chevron-right-circle btn-arrow' style='color:#ffffff'></i>
</a>
</div>
1 preferred solution
You need only add right:0 and width: 100%; to your .navbar class.
.navbar {
position: fixed;
right:0;
width:100%;
background: transparent;
display: flex;
align-items: center;
z-index: 999;
}
/* Resets */
:root {
--pblack: #1E293B;
--pyellow: #FFE934;
--pwhite: white;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--pblack);
color: var(--pwhite);
font-family: raleway;
}
a {
color: white;
text-decoration: none;
}
/* Resets end */
/* Styling starts */
.logo {
width: 32px;
margin-right: auto;
}
.logo-type {
display: none;
}
.container {
margin: 1rem;
display: flex;
flex-direction: column;
position: relative;
height: 90vh;
}
/* .nav-holder { position: fixed;
} */
.navbar {
position: fixed;
right:0;
width:100%;
background: transparent;
display: flex;
align-items: center;
z-index: 999;
}
.nav-menu {
position: relative;
background: var(--pyellow);
width: 1.5rem;
height: 2px;
margin-left: auto;
}
.nav-menu::before {
content: " ";
position: absolute;
top: -7px;
right: 0;
background: var(--pyellow);
width: .5rem;
height: 2px;
}
.nav-menu::after {
content: " ";
position: absolute;
top: 7px;
right: 0;
background: var(--pyellow);
width: 1rem;
height: 2px;
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
/* border: 2px solid red; */
text-align: center;
}
.greeting {
font-size: 5rem;
margin-bottom: 0;
}
.hero-name {
font-size: 1.5rem;
}
.hero-anim {
position: relative;
margin: 6rem;
/* border: 2px solid red; */
width: 60%;
/* height: 100px; */
}
.h-love {
position: absolute;
top: 0;
left: 0;
}
.x-anim {
position: absolute;
top: 0;
right: 0;
background: var(--pyellow);
width: 2px;
height: 1rem;
transform: rotate(45deg);
}
.x-anim::after {
content: "";
display: inline-block;
background: var(--pyellow);
width: 2px;
height: 1rem;
transform: rotate(90deg);
}
.h-creating {
position: absolute;
top: 20px;
left: 20px;
font-size: 2rem;
margin: 0;
color: var(--pyellow);
}
.h-amazing {
position: absolute;
top: 65px;
left: 45px;
}
.dash-anim {
position: absolute;
top: 75px;
left: 0px;
width: 1.5rem;
height: 2px;
background: var(--pyellow);
}
.h-details {
margin-left: 3rem;
margin-right: 3rem;
margin-top: 10rem;
}
.know-more-btn {
position: relative;
border: 1px solid var(--pyellow);
border-radius: 50px;
padding: .5rem 2.5rem .5rem 1rem;
width: max-content;
display: flex;
align-items: center;
}
.btn-arrow {
position: absolute;
right: 2px;
font-size: 2rem;
}
.sect2 {
background-color: #FFE934;
width: 100%;
height: 100vh;
}
<body>
<div class="nav-holder">
</div>
<div class="container">
<nav class="navbar">
<img src="/img/Mitcho Icon black yellow.png" alt="logo" class="logo"> <span class="logo-type">Mitcho</span>
<div class="nav-menu"></div>
</nav>
<main class="main-con">
<div class="hero">
<h1 class="greeting">Hello!</h1>
<span class="hero-name">
I'm Mitchell Orutu,
</span>
<div class="hero-anim">
<span class="h-love">I Love</span>
<div class="x-anim"></div>
<span class="h-creating">Creating</span>
<div class="dash-anim"></div>
<span class="h-amazing">Amazing Experiences</span>
</div>
<p class="h-details">A multidisciplinary designer and frontend developer. I'm obsessed with creating amazing experiences and have fun while doing it.</p>
<a href="#" class="know-more-btn">
<span class="know-more-text">Know More</span>
<i class='bx bxs-chevron-right-circle btn-arrow' style='color:#ffffff'></i>
</a>
</div>
2 solution
I wrap the nav tag with a div and assign this div a width and padding. Then i remove the position:fixed from the nav element.
/* Resets */
:root {
--pblack: #1E293B;
--pyellow: #FFE934;
--pwhite: white;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--pblack);
color: var(--pwhite);
font-family: raleway;
}
a {
color: white;
text-decoration: none;
}
/* Resets end */
/* Styling starts */
.logo {
width: 32px;
margin-right: auto;
}
.logo-type {
display: none;
}
.container {
margin: 1rem;
display: flex;
flex-direction: column;
position: relative;
height: 90vh;
}
/* .nav-holder { position: fixed;
} */
.fixed {
position: fixed;
width:100%;
padding:0px 30px 0px 0px;
}
.navbar {
background: transparent;
display: flex;
align-items: center;
z-index: 999;
}
.nav-menu {
position: relative;
background: var(--pyellow);
width: 1.5rem;
height: 2px;
margin-left: auto;
}
.nav-menu::before {
content: " ";
position: absolute;
top: -7px;
right: 0;
background: var(--pyellow);
width: .5rem;
height: 2px;
}
.nav-menu::after {
content: " ";
position: absolute;
top: 7px;
right: 0;
background: var(--pyellow);
width: 1rem;
height: 2px;
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
/* border: 2px solid red; */
text-align: center;
}
.greeting {
font-size: 5rem;
margin-bottom: 0;
}
.hero-name {
font-size: 1.5rem;
}
.hero-anim {
position: relative;
margin: 6rem;
/* border: 2px solid red; */
width: 60%;
/* height: 100px; */
}
.h-love {
position: absolute;
top: 0;
left: 0;
}
.x-anim {
position: absolute;
top: 0;
right: 0;
background: var(--pyellow);
width: 2px;
height: 1rem;
transform: rotate(45deg);
}
.x-anim::after {
content: "";
display: inline-block;
background: var(--pyellow);
width: 2px;
height: 1rem;
transform: rotate(90deg);
}
.h-creating {
position: absolute;
top: 20px;
left: 20px;
font-size: 2rem;
margin: 0;
color: var(--pyellow);
}
.h-amazing {
position: absolute;
top: 65px;
left: 45px;
}
.dash-anim {
position: absolute;
top: 75px;
left: 0px;
width: 1.5rem;
height: 2px;
background: var(--pyellow);
}
.h-details {
margin-left: 3rem;
margin-right: 3rem;
margin-top: 10rem;
}
.know-more-btn {
position: relative;
border: 1px solid var(--pyellow);
border-radius: 50px;
padding: .5rem 2.5rem .5rem 1rem;
width: max-content;
display: flex;
align-items: center;
}
.btn-arrow {
position: absolute;
right: 2px;
font-size: 2rem;
}
.sect2 {
background-color: #FFE934;
width: 100%;
height: 100vh;
}
<body>
<div class="nav-holder">
</div>
<div class="container">
<div class="fixed">
<nav class="navbar">
<img src="/img/Mitcho Icon black yellow.png" alt="logo" class="logo"> <span class="logo-type">Mitcho</span>
<div class="nav-menu"></div>
</nav>
</div>
<main class="main-con">
<div class="hero">
<h1 class="greeting">Hello!</h1>
<span class="hero-name">
I'm Mitchell Orutu,
</span>
<div class="hero-anim">
<span class="h-love">I Love</span>
<div class="x-anim"></div>
<span class="h-creating">Creating</span>
<div class="dash-anim"></div>
<span class="h-amazing">Amazing Experiences</span>
</div>
<p class="h-details">A multidisciplinary designer and frontend developer. I'm obsessed with creating amazing experiences and have fun while doing it.</p>
<a href="#" class="know-more-btn">
<span class="know-more-text">Know More</span>
<i class='bx bxs-chevron-right-circle btn-arrow' style='color:#ffffff'></i>
</a>
</div>
Can fix it by slapping on a width: 100%:
/* Resets */
:root {
--pblack: #1E293B;
--pyellow: #FFE934;
--pwhite: white;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--pblack);
color: var(--pwhite);
font-family: raleway;
}
a {
color: white;
text-decoration: none;
}
/* Resets end */
/* Styling starts */
.logo {
width: 32px;
margin-right: auto;
}
.logo-type {
display: none;
}
.container {
margin: 1rem;
display: flex;
flex-direction: column;
position: relative;
height: 90vh;
}
/* .nav-holder { position: fixed;
} */
.navbar {
position: fixed;
width: 100%;
background: transparent;
display: flex;
align-items: center;
z-index: 999;
}
.nav-menu {
position: relative;
background: var(--pyellow);
width: 1.5rem;
height: 2px;
margin-left: auto;
}
.nav-menu::before {
content: " ";
position: absolute;
top: -7px;
right: 0;
background: var(--pyellow);
width: .5rem;
height: 2px;
}
.nav-menu::after {
content: " ";
position: absolute;
top: 7px;
right: 0;
background: var(--pyellow);
width: 1rem;
height: 2px;
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
/* border: 2px solid red; */
text-align: center;
}
.greeting {
font-size: 5rem;
margin-bottom: 0;
}
.hero-name {
font-size: 1.5rem;
}
.hero-anim {
position: relative;
margin: 6rem;
/* border: 2px solid red; */
width: 60%;
/* height: 100px; */
}
.h-love {
position: absolute;
top: 0;
left: 0;
}
.x-anim {
position: absolute;
top: 0;
right: 0;
background: var(--pyellow);
width: 2px;
height: 1rem;
transform: rotate(45deg);
}
.x-anim::after {
content: "";
display: inline-block;
background: var(--pyellow);
width: 2px;
height: 1rem;
transform: rotate(90deg);
}
.h-creating {
position: absolute;
top: 20px;
left: 20px;
font-size: 2rem;
margin: 0;
color: var(--pyellow);
}
.h-amazing {
position: absolute;
top: 65px;
left: 45px;
}
.dash-anim {
position: absolute;
top: 75px;
left: 0px;
width: 1.5rem;
height: 2px;
background: var(--pyellow);
}
.h-details {
margin-left: 3rem;
margin-right: 3rem;
margin-top: 10rem;
}
.know-more-btn {
position: relative;
border: 1px solid var(--pyellow);
border-radius: 50px;
padding: .5rem 2.5rem .5rem 1rem;
width: max-content;
display: flex;
align-items: center;
}
.btn-arrow {
position: absolute;
right: 2px;
font-size: 2rem;
}
.sect2 {
background-color: #FFE934;
width: 100%;
height: 100vh;
}
<body>
<div class="nav-holder">
</div>
<div class="container">
<nav class="navbar">
<img src="/img/Mitcho Icon black yellow.png" alt="logo" class="logo"> <span class="logo-type">Mitcho</span>
<div class="nav-menu"></div>
</nav>
<main class="main-con">
<div class="hero">
<h1 class="greeting">Hello!</h1>
<span class="hero-name">
I'm Mitchell Orutu,
</span>
<div class="hero-anim">
<span class="h-love">I Love</span>
<div class="x-anim"></div>
<span class="h-creating">Creating</span>
<div class="dash-anim"></div>
<span class="h-amazing">Amazing Experiences</span>
</div>
<p class="h-details">A multidisciplinary designer and frontend developer. I'm obsessed with creating amazing experiences and have fun while doing it.</p>
<a href="#" class="know-more-btn">
<span class="know-more-text">Know More</span>
<i class='bx bxs-chevron-right-circle btn-arrow' style='color:#ffffff'></i>
</a>
</div>
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'm trying to get this layout.
<blockquote class="imgur-embed-pub" lang="en" data-id="a/kCjW9"></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
Here's the code I have. I can't seem to get z-index to work so that I could bring black border on top of the background.
<blockquote class="imgur-embed-pub" lang="en" data-id="a/6a7Ev"></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
.btn {
border-radius: 0px!important;
font-family: $font-roboto!important;
font-size: 1.125rem!important;
text-shadow: none!important;
box-shadow: none!important;
&.fountain-blue {
background-color: $color-fountain-blue;
color: #fff;
margin-left:5px;
margin-top: 5px;
margin-right: -10px;
}
}
.btn-border {
border: 2px solid #000;
display: inline-block;
height: 40px;
z-index: 9999!important;
}
<div class="btn-border mt-4">
learn more about us
</div>
There are a lot of ways to do this but simple method is to use pseudo-elements. check out the snippet.
CODEPEN (SASS version)
#import url("https://fonts.googleapis.com/css?family=Roboto");
.btn {
border-radius: 0px;
font-size: 1.125rem;
text-shadow: none;
box-shadow: none;
display: block;
width: calc(100% - 25px);
text-decoration: none;
font-family: 'Roboto', sans-serif;
text-align: center;
}
.btn.fountain-blue {
background-color: #65becf;
color: #fff;
margin-left: 5px;
margin-top: 5px;
padding-top: 10px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
.btn-border {
display: inline-block;
height: 40px;
z-index: 9999;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.btn-border:after {
content: '';
border: 2px solid #000;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
<div class="btn-border mt-4">
READ MORE
</div>
You should do it something like this, but than with your own colors and sizes.
.btn {
display: inline-block;
border: 1px solid black;
position: relative;
padding: 10px 20px;
margin: 20px;
color: #fff;
}
.btn:before {
background-color: blue;
border-color: green;
border-style: solid;
border-width: 10px 5px 5px 10px;
z-index: -1;
position: absolute;
height: 100%;
width: 100%;
top: -5px;
left: -5px;
content: "";
}
<a class="btn">Read more</a>
As a possible solution.
* {
box-sizing: border-box;
}
body {
margin: 2em;
}
.btn {
background-color: darkblue;
color: white;
border: .2em solid white;
height: 2.5em;
width: 7em;
position: relative;
cursor: pointer;
}
.btn:before {
content: " ";
width: 9em;
height: 4em;
background-color: lightblue;
position: absolute;
top: -1em;
left: -1em;
z-index: -1;
}
.btn:after {
content: " ";
position: absolute;
background-color: transparent;
border: thin solid black;
height: 2em;
width: 6.5em;
top: -.5em;
left: -.5em;
}
<button class="btn">Click me</button>
Whenever i try to move separator up or down, the element h1 above .separator class starts moving along with the separator. Is there any easy way to get rid of this issue?
Below is my HTML/CSS Code
.banner img {
width: 100%;
height: 100%;
}
.banner {
position: relative;
margin: -0.6%
}
.OverLay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.OverLayContent {
width: 100%;
height: 100%;
display: table;
}
.overLayDescription {
width: 70%;
margin: 0 auto;
}
.OverLayText {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.OverLayText h1 {
margin-bottom: 5%;
color: #FFF;
font-size: 120px;
/*border-bottom: 2px solid #15a4fa;*/
}
.separator {
margin: 0 auto;
width: 50%;
background-color: #15a4fa;
height: 2px;
margin-bottom: 10.4%;
}
.OverLayText a {
color: #FFF;
border: 1px solid #15a4fa;
padding: 10px;
}
.OverLayText p {
color: #FFF;
margin-top: 2%;
margin-bottom: 3%;
}
.OverLayContent {
position: relative;
}
<div class="banner">
<img src="http://cometoart.com/wp-content/uploads/2016/03/pojo-placeholder-2.png" />
<div class="OverLay">
<div class="OverLayContent">
<div class="OverLayText">
<h1>STRICT</h1>
<dir class="separator"></dir>
<p>STRICT is a responsive theme with a a clean and minimal look.</p>
Call to action
</div>
</div>
</div>
</div>
Just because you are using .OverLayText to vertically-align:middle;.
.banner img {
width: 100%;
height: 100%;
position: relative;
}
.banner {
position: relative;
margin: -0.6%
}
.OverLay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.OverLayContent {
width: 100%;
height: 100%;
display: table;
}
.overLayDescription {
width: 70%;
margin: 0 auto;
}
.OverLayText {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
vertically-align:middle;
}
.OverLayText h1 {
margin-bottom: 5%;
color: #FFF;
font-size: 120px;
/*border-bottom: 2px solid #15a4fa;*/
}
.separator {
/*margin: 0 auto;*/
width: 50%;
background-color: #15a4fa;
height: 2px;
/*top: 80%;*/
position: relative;
margin: auto;
text-align: center;
display: block;
}
.OverLayText a {
color: #FFF;
border: 1px solid #15a4fa;
padding: 10px;
}
.OverLayText p {
color: #FFF;
margin-top: 2%;
margin-bottom: 3%;
}
.OverLayContent {
position: relative;
}
<div class="banner">
<img src="http://cometoart.com/wp-content/uploads/2016/03/pojo-placeholder-2.png" />
<div class="OverLay">
<div class="OverLayContent">
<div class="OverLayText">
<h1>STRICT</h1>
<dir class="separator"></dir>
<p>STRICT is a responsive theme with a a clean and minimal look.</p>
Call to action
</div>
</div>
</div>
</div>
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