I would like to make the effect of underlining links when hovering over styled components, for some reason hover is not working and not even after
export const Links = styled.div `
ul {
display: flex;
}
li {
color: #fff;
text-decoration: none;
list-style-type: none;
margin: 1.4vh;
cursor: pointer;
letter-spacing: 0.1rem;
&::after {
content: "";
width: 0;
height: 4px;
background-color: #ff914d;
position: absolute;
bottom: 0;
left: 0;
}
&:hover::after {
width: 100%;
}
}
`;
Two things are missed:
For nested selectors in styled components you can use this -
&:hover:after {
width: 100%;
}
Since, pseudo selector ::after has position absolute, in order to get the underline effect, make as position relative.
here is the final output
export const Links = styled.div `
ul {
display: flex;
}
li {
color: #fff;
text-decoration: none;
list-style-type: none;
margin: 1.4vh;
cursor: pointer;
letter-spacing: 0.1rem;
position: relative;
&::after {
content: "";
width: 0;
height: 4px;
background-color: #ff914d;
position: absolute;
bottom: 0;
left: 0;
}
&:hover:after {
width: 100%;
}
}
`;
Related
I have some trouble with bootstrap carousel. I cannot remove blue under lines.
Can someone help me? It's not text decoration (text-decoration: none; doesn't work).
.carousel {
width: 100%;
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-decoration: none !important
}
.carousel-inner,.carousel,.carousel-indicators {
text-decoration: none;
box-shadow: none;
}
.carousel-indicators {
bottom: -150px;
text-decoration: none !important
}
.section1-text {
line-height: 1.55;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
width: 100%;
text-decoration: none !important
}
.section1-text p {
color: white;
font-size: 25px ;
margin-bottom: 30px;
width: 80%;
z-index: 2;
}
I am creating a very simple navbar and I want hover transitions on the links. I would like to add ::before elements in each link to smoothly transition a different color background on hover. The problem is (as far as I am concerned) that those ::before elements ignore their z-index staking and they hide the link text behind.
I would link to know if I am trying to do something impossible or there is actually a solution I am unable to find.
ul.menu-principal>li {
display: inline-block;
}
ul.menu-principal>li>a {
color: #000;
display: block;
text-transform: uppercase;
padding: 10px;
position: relative;
z-index: 96;
}
ul.menu-principal>li>a::before {
content: '';
position: absolute;
z-index: 95;
top: 0;
left: 0;
width: 100%;
height: 0;
background: orange;
transition: all .2s linear;
}
ul.menu-principal>li>a:hover::before {
height: 100%;
}
ul.menu-principal>li:hover a {
color: #fff;
}
<ul class="menu-principal">
<li>Item-01</li>
<li>Item-01</li>
<li>Item-01</li>
<li>Item-01</li>
</ul>
Website
http://canfosses.mastercamping.com
Thank you all for the responses.
You can just use for your case z-index: -1:
ul.menu-principal>li {
display: inline-block;
}
ul.menu-principal>li>a {
color: #000;
display: block;
text-transform: uppercase;
padding: 10px;
position: relative;
z-index: 96;
}
ul.menu-principal>li>a::before {
content: '';
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 0;
background: orange;
transition: all .2s linear;
}
ul.menu-principal>li>a:hover::before {
height: 100%;
}
ul.menu-principal>li:hover a {
color: #fff;
}
<ul class="menu-principal">
<li>Item-01</li>
<li>Item-01</li>
<li>Item-01</li>
<li>Item-01</li>
</ul>
When scrolling the page, the TextField on the page is visible on header area. The header is created with css and I am using TextField from material-ui.
I have never created an header with css before. Is there maybe some code that has to be included, when creating an header? see code below.
Any help is appreciated! Thanks in advance.
.toolbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #02ABED;
height: 56px;
}
.toolbar__navigation {
display: flex;
height: 100%;
align-items: center;
padding: 0 1rem;
}
.toolbar__logo a {
color: white;
text-decoration: none;
font-size: 1.5rem;
}
.spacer {
flex: 1;
}
.toolbar_navigation-items ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.toolbar_navigation-items li {
padding: 0 0.5rem;
}
.toolbar_navigation-items a {
color: white;
text-decoration: none;
}
.toolbar_navigation-items a:hover,
.toolbar_navigation-items a:active {
color: black;
}
If anyone has the same problem, I fixed this by setting the z-index, see code below:
.toolbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #02ABED;
height: 56px;
z-index: 1;
}
Is it possible to make a css3 counter increment itself without displaying the number?
I use steps and when a step is done I want to display another thing in the ::before content (like a font-awesome icon). It works but if I don't write content: counter(step); then the number is not incremented and all my steps after have a wrong number.
I tried a few things but I'm out of idea here. Do you know how to increment correctly the counter without displaying the number itself?`
li {
list-style-type: none;
color: $gray-dark;
font-size: 12px;
width: 33.33%;
float: left;
position: relative;
line-height: 1;
&:after {
content: '';
width: 100%;
height: 2px;
background: $gray-darker;
position: absolute;
left: -50%;
top: 12px;
z-index: 99; /*put it behind the numbers*/
}
&:before {
#include border-radius(15px);
content: counter(step);
counter-increment: step;
width: 28px;
height: 28px;
line-height: 20px;
display: block;
font-size: 12px;
color: $white;
font-weight: bold;
background: $gray-dark;
margin: 0 auto 5px auto;
position: relative;
z-index: 100 !important;
padding-top: 3px;
border:1px solid $gray-darker;
}
&:first-child:after {
// connector not needed before the first step
content: none;
}
&.question {
&:before {
content: '?';
background: $blue-lighter;
}
}
/**
* Specific classes for <li> element.
*/
&.active {
color: $gray-darker;
&:before {
background-color: $orange;
}
}
&.success {
#extend .fa;
color: $gray-darker;
&:before {
background-color: $green-check;// I can't set a content: '\f00c' to get a fa icon.
}
}
}
You can try content: counter(step, none);. Live demo here.
Issue I'm having is the background image on the anchor as a before element needs to move with the text as you resize your screen.
I need the background image to maintain it's position ( e.g left: 20px;) with the text as you resize your screen.
Here is my CSS:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
float: left;
width: 50%;
}
ul li a {
display: block;
padding: 15px 20px;
text-align: center;
text-decoration: none;
font-weight: bold;
position: relative;
color: #717171;
}
ul li a:before {
background: url(http://graphicclouds.com/wp-content/uploads/img/73-google-style-icons-thumb.jpg) no-repeat -11px -26px;
content: '';
display: block;
width: 34px;
height: 33px;
position: absolute;
top: 10px;
}
.link-1:before {
left: 20px;
}
.link-2:before {
left: 0px;
}
Here is a working example: http://jsfiddle.net/2KHS6/
All suggestions welcome
New version:
http://jsfiddle.net/2KHS6/5/
Hope it fills your needs. You might want to set a min-width to avoid problems with small screens though. I did this basically:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
display: inline-block;
width: 50%;
margin: 10px 0;
/* So things don't get crazy */
min-width: 160px;
/* center the child, the <a> */
text-align: center;
}
ul li a {
display: inline-block;
text-decoration: none;
font-weight: bold;
color: #717171;
/* Should be the same height as the img so it stays centered */
line-height: 33px;
}
ul li a:before {
background: url(http://graphicclouds.com/wp-content/uploads/img/73-google-style-icons-thumb.jpg) no-repeat -11px -26px;
content: '';
display: block;
width: 34px;
height: 33px;
position: absolute;
/* position the image at the left of the a. There are many methods to do this actually */
margin: 0 0 0 -50px;
}