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;
}
Related
This question already has answers here:
How do I not underline an element in a link?
(2 answers)
Closed 2 years ago.
I'm not able to remove the underline from the :before element.
As you can see from the image, I set the underline of the link during the focus event, but I'd like to have the only text underlined and not the icon.
This is the code for the icon:
a:before {
content: "\f058";
font-family: FontAwesome;
}
This is the code for the focus effect:
a:focus{
text-decoration:underline;
}
I tried something like this but it didn't work.
a:before:focus {
text-decoration:none;
}
Use a span inside the link and apply text-decoration: underline on the inner element
a {
text-decoration: none;
}
a span {
text-decoration: underline;
padding-left: .5em;
}
a::before {
content: "\f058";
font-family: FontAwesome;
}
<span>Lorem ipsum</span>
if you cannot change the markup then you have to fake this behaviour, e.g. using a border with a pseudoelement
a {
text-decoration: none;
position: relative;
}
a::before {
content: "\f058";
font-family: FontAwesome;
width: 2ch;
display: inline-block;
}
a::after {
content: "";
position: absolute;
border: 1px solid currentColor;
left: 2ch;
bottom: 0;
right: 0;
}
a:focus::after {
border: none;
}
Lorem ipsum
Text-decoration when applied on a link "a", will result in the underlining on the icon too. Instead, you can use : The Unarticulated Annotation (Underline) element in your HTML code.
HTML code:
<u>Lorem Ipsum</u>
and then, style the in CSS:
u{
text-decoration: underline;
}
Using html 5, I have an anchor element that contains block elements (e.g., p elements). I want the text within the p elements to change on hover—they don't.
p {
color: #222222;
}
a:link {
color: inherit;
text-decoration: none;
}
a:visited {
color: inherit;
text-decoration: none;
}
a:hover {
color: red !important;
text-decoration: none;
}
<p>This changes color on hover.</p>
<a href="test.htm">
<p>This doesn't change color on hover.</p>
</a>
In my case, there are numerous elements within the anchor element and I can't change the CSS styles of those elements (e.g., I can't change the hover selector for p elements).
Thanks!
p won't inherit the hover color from an a tag around since it has its own color parameter (thanks to #BoltClock). But you can use a:hover, a:hover p { ... } as a selector to get what you want:
p {
color: #222222;
}
a:link {
color: inherit;
text-decoration: none;
}
a:visited {
color: inherit;
text-decoration: none;
}
a:hover,
a:hover p
{
color: red !important;
text-decoration: none;
}
<p>This changes color on hover.</p>
<a href="test.htm">
<p>This also changes color on hover.</p>
</a>
Try this, this will change the hover selector for all the p element inside an anchor element
p {
color: #222222;
}
a:link {
color: inherit;
text-decoration: none;
}
a:visited {
color: inherit;
text-decoration: none;
}
a:hover {
color: red !important;
text-decoration: none;
}
a p:hover{
color: red;
}
<p>This changes color on hover.</p>
<p>This doesn't change color on hover.</p>
So I have this bit of CSS to change a specific link on a page to a different color (the default link color is the same background color of where the text is sitting, making it invisible).
.scroll a:link {
text-decoration: underline;
color: #5a4a31;
}
.scroll a:hover {
text-decoration: underline;
color: #5a4a31;
}
.scroll a:visisted {
text-decoration: underline;
color: #5a4a31;
}
.scroll a:active {
text-decoration: underline;
color: #5a4a31;
}
Which works in every browser but Chrome ('hover' is the only part that actually works when viewing in Chrome, the rest just go to the default link styles I have set). Anyone know why? Thanks!!
If you're going style each state of the link, the order you should do this is LVHA (link, visited, hover, active). Also, you misspelled 'visited'.
.scroll a:link {
text-decoration: underline;
color: red;
}
.scroll a:visited {
text-decoration: underline;
color: green;
}
.scroll a:hover {
text-decoration: underline;
color: blue;
}
.scroll a:active {
text-decoration: underline;
color: orange;
}
You could refactor a little:
.scroll a {
text-decoration: underline;
}
.scroll a:link { /* color: blah; */ }
.scroll a:visited { /* color: blah; */ }
.scroll a:hover { /* color: blah; */ }
.scroll a:active { /* color: blah; */ }
http://codepen.io/antibland/pen/WwKzdN
You spelled visisted instead of visited.
if .scroll is the class of the link than their is no need to put
a:link... you can just put .scroll:link or .scroll:hover.
How to remove text-decoration: underline for CSS pseudo element in Internet Explorer?
The + icon has no underline in other browsers (like Google Chrome), but in Internet Explorer the + icon is underlined. How to remove the underline for Internet Explorer?
The Code (https://jsfiddle.net/u5m067xq/4/):
h3 a {
text-decoration:underline;
}
h3 a:before {
display:inline-block;
content: '+';
margin:0;
padding: 4px;
text-decoration:none;
}
<h3>link</h3>
This code is working as you expected. Default styling of the a tag is text-decoration: underline. You will have to set it none.
span {
text-decoration: underline;
}
h3 a:before {
display: inline-block;
content: '+';
margin: 0;
padding: 4px;
text-decoration: none;
}
a {
text-decoration: none;
}
<h3><span>link</span></h3>
How can one get the underline to only apply to the a element and not to the content of the :after?
With the CSS below one can control the color of an :after element on :hover. However, the text-decoration cannot be changed.
Here's the jsfiddle to illustrate the problem:
http://jsfiddle.net/JfGVE/500/
Here's the CSS:
a {
color: green;
text-decoration: none;
}
a:hover {
color: green;
text-decoration: underline;
}
a:after {
font-family: FontAwesome;
content: "\f061";
}
a:hover:after {
color: orange;
text-decoration: none !important;
}
Setting the pseudo-element to display: inline-block will remove the text decoration:
a:after {
font-family: FontAwesome;
content: "\f061";
display: inline-block;
}
The underline will still apply to the space in between because you have an , though — you can prevent this by offsetting the pseudo-element with a margin instead of putting hard spaces in the HTML.
afelixj has almost the best answer here, but it has a non-clickable space, even if you remove all of the actual space in the markup. To fix that, just use padding-right on the anchor to create the space to put the icon, then position it at right: 0: http://jsfiddle.net/JfGVE/591/. Inline-block treats the icon as a character, and it will wrap like text.
Add display: inline-block; to a:after
a {
color: green;
text-decoration: none;
}
a:hover {
color: green;
text-decoration: underline;
}
a:after {
display: inline-block;
font-family: FontAwesome;
content: "\f061";
}
a:hover:after {
color: orange;
text-decoration: none;
}