I have text-decoration: underline on a and I would need to keep it like that. But I am also trying to remove the underline from the pseudoelement, overriding it with text-decoration: none !important; seems to have no effect. Can something be done about it?
http://codepen.io/anon/pen/yMzJoZ
a {
text-decoration: underline;
}
a:before {
content: '#';
text-decoration: none !important;
}
<ul>
<li>
asdf
</li>
</ul>
Your pseudoelement is just an inline text node, which can't really be modified too easily without changing it's display type. Add display: inline-block; - this should allow you to manipulate it independently.
a {
text-decoration: underline;
}
a::before {
content: '#';
text-decoration: none !important;
display: inline-block;
}
<ul>
<li>
asdf
</li>
</ul>
Related
The problem is that I have a task to make a white dot when the item menu is hover . ( picture below) . I am asking for help, because it is very important for my order. If need be, I'll pay.
Page is on draft : dalaindustrisupport.shapehosting.se
Example
I'm not good in CSS codes. Usually taking stock settings of plugin.
Try this:
li {
list-style: none;
background-color: blue;
color: white;
}
li:before {
content: "• ";
color: white;
visibility: hidden;
}
li:hover:before {
visibility: visible;
}
<ul>
<li>Hover Here</li>
</ul>
the text is cascading downwards for unknown reasons
I'm taking a high-school web design class and as an extension project I'm creating a faux restaurant advertisement website. My coding for a top navigation bar is correct as far as I can see and my teacher doesn't know how to help me get the text and navigation box centered and next to each other. All the links work how they're supposed to, they just aren't in the right place >:(
My css code for navigation bar
Remove the css property float: left from .topnav a and make .topnav li display: inline-block
Sounds like you guys need a new teacher lol. But on the other hand, he makes you find out the problem by "yourself", which is nice.
body {
background: #2f4f4e;
}
.topnav {
background-color: #333;
overflow: hidden;
}
.topnav li {
display: inline-block;
}
.topnav a {
color: #f2f2f2;
text-align: center;
padding: 16px 16px;
text-decoration: none;
font-size: 20px;
font-family: Palatino;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
<nav class="topnav">
<ul>
<li>Takeout Options</li>
<li>Kid's Menu</li>
<li>Our Mascot</li>
<li>Our Founder</li>
<li>Back Dumbster: Schedule and Guideline</li>
</ul>
</nav>
How to remove background on a second level li elements ?
<ul class="navi">
<li>Test</li>
<li class="current">
Test
<ul class="navi2">
<li class="current">Remove bg
</li>
<li>Remove bg
</li>
</ul>
</li>
<li>Test
</li>
</ul>
I have tried to put background-color: blue instead of background: none, and it worked. I really don't know why.
Here is my CSS:
ul.navi {
list-style: none;
width: 247px;
}
ul.navi > li {
line-height: 36px;
background-color: red;
border-radius: 8px;
margin-bottom: 10px;
}
ul.navi > li > ul > li {
background: none;
}
ul.navi li a {
display: block;
color: #f4dfe8;
font-weight: bolder;
padding: 0 0 0 12px;
text-decoration: none;
}
http://jsfiddle.net/zhrgyLrf/
Why not just set the background on the direct a child elements?
Updated Example
ul.navi > li > a {
background-color: red;
}
The reason background: none wasn't working is because you are setting the background on the entire parent, li element. Thus, even though the children don't have a background, the parent's background is still shown because it encompasses the children. As an alternative, you would have to set the children's background to #fff. In doing so, you would unfortunately lose your transparency, though.
Your li is inside the red li. Try to just set another color, for example
ul.navi > li > ul > li {
background: #fff;
}
Color: transparent will also not work here... Because when You've got color: transparent, it is transparent, and the "below" red is visible underneath it.
Good luck, hope it helps.
Updated: http://jsfiddle.net/zhrgyLrf/1/
IT happens because you ars setting the background to the entire <li> , and the second level is inside to the first , your second level has a transparent background and that's the reason because you see red (is the inmediately background set). You have 2 options:
set the background to the elements
set a background matching to the original background
I recommend set the background to the elements like this:
ul.navi > li {
line-height: 36px;
border-radius: 8px;
margin-bottom: 10px;
}
ul.navi > li > a {
background-color: red;
}
fiddle : http://jsfiddle.net/zhrgyLrf/2/
Given the following html:
<span data-icon="✪"></span>A Link
Is it possible to change the text-decoration (to none) on hover? The color will change, the text-decoration will not.
CSS:
a { text-decoration: none; }
a:hover{ text-decoration: underline; }
a:hover [data-icon]:before{
/*Doesn't work*/
text-decoration: none;
/*Works*/
color: red;
}
jsfiddle
As I explained in this other answer, you can use display: inline-block to prevent text-decoration set to an ancestor from propagating to your element:
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a > [data-icon]:before {
display: inline-block; /* Avoid text-decoration propagation from `a` */
content: attr(data-icon);
}
a:hover > [data-icon]:before {
color: red;
}
<span data-icon="✪"></span>A Link
Make things easier and separate it out
http://jsfiddle.net/nyFxn/2/
<span data-icon="✪"></span><span class="text">A Link</span>
CSS
a:hover{ text-decoration: none; }
a:hover [data-icon] {
/*Works*/
color: red;
}
a:hover .text {
text-decoration: underline;
}
Using display: inline-block works in all browsers but IE. To get it to work in IE8+, add overflow:hidden to the pseudo element containing the icon.
If the underline still remains in IE, set line-height: 1 on the pseudo element, so in total you get
a [data-icon]:before {
display: inline-block;
overflow: hidden;
line-height: 1;
}
For some reason, in IE only (tested so far on IE 8 with and without compatability mode), my visited links in an unordered list indent after being visited.
http://etech.916networks.com
My HTML (generated dynamically via PHP):
<ul>
<li>
<a target='_blank' href='http://www.test.com/mylink.html' title='Systems Engineer'>Systems Engineer</a>
</li>
<li>
<a target='_blank' href='http://www.test.com/mylink2.html' title='Validation Engineer'>Validation Engineer
</a>
</li>
</ul>
My CSS (extra stuff in here trying to get it to work):
#latest-updates li {
list-style-type: none;
list-style-image: none;
color: #3c758c;
padding-bottom: 4px;
list-style-position: outside;
}
#latest-updates a, a:visited {
list-style-type: none;
list-style-image: none;
list-style-position: outside;
text-indent: 0;
padding; 0;
margin: 0;
}
#latest-updates a:hover {
text-decoration: none;
color: #25b6d6;
}
Any help is appreciated, this is driving me crazy!
Thanks!
In your second CSS block I believe you want.
#latest-updates a, #latest-updates a:visited
Otherwise you are applying that style to all 'a' tags in latest-updates plus all visited 'a' tags on the entire page.
I've had similar problems before but not in IE8.
Try resetting the margin and padding on the parent element, which would be ul. So try adding this:-
ul{ margin:0; padding:0; }