I'm trying underline all letters except the first. I attempted to remove the underline from the first letter via ::first-letter without success. Why doesn't that work here?
<a class="sample underline letter-underline-none"
href="https://twitter.com/ryanve"
>#ryanve</a>
How can I remove the underline without changing this markup? I made a codepen with this CSS.
.letter-underline::first-letter,
.underline {
text-decoration: underline;
}
.letter-underline-none::first-letter,
.underline-none {
text-decoration: none;
}
.sample {
display: block;
}
From https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration:
Text decorations are drawn across descendant text elements. This means that if an element specifies a text decoration, then a child element can't remove the decoration.
(emphasis mine). Of course, in your case you don't have a true child element (merely a first-letter pseudo-element), but the same logic applies.
That said, some experimentation suggests a child element can add its own underline (covering up the ancestor's), and then specify the color of that underline using the text-decoration-color. So you could potentially hack together your desired visual effect, in most cases, by writing something like
.letter-underline-none::first-letter {
text-decoration: underline;
text-decoration-color: #FFF;
}
(adjusting the #FFF part to match the intended background color). I don't think I'd recommend that, though — it seems too likely to have weird edge cases that look worse than the all-underline effect to begin with.
Related
I'm styling the selected text in my document using the ::selection pseudo class.
div::selection {
color: white;
background-color: red;
}
span {
color:white;
background-color: red;
}
<div>Selected styled.</div>
Selected regular.
<span>Not Selected.</span>
When I select the styled text, the red is very visibly not the same color as regular red. It has a blue-ish overlay. This seems to be some sort of interaction between the default selection styles of the browser and my own styles.
How can I completely remove the browsers styling while keeping my own?
I've tried using user-select: none; in the html style, but that completely overrides all selection.
EDIT: I've just run this is firefox and it's fine, so this appears to be a Chrome specific issue.
EDIT: Here is a screenshot of what I see when selecting:
I'm using Google Chrome Version 74.0.3729.131 on a Mac.
Here are two examples based on this HTML.
<a href="#">
<div class="foo">
hello
<span class="bar">world</span>
</div>
</a>
In the first one, I make the link not underline on hover, then make a sub-portion of the link underline, and that works fine:
a {
text-decoration:none;
}
a:hover {
text-decoration: none;
}
a:hover .bar {
text-decoration: underline;
}
http://jsfiddle.net/3qPyX/1/
In the second, I now reverse the selectors so that the second word should be un-underlined. However, now something strange happens. The entire link remains underlined even though the selectors seem like they should remove underline from the second word. <-- (this is the question. why does this happen?)
a {
text-decoration:none;
}
a:hover {
text-decoration: underline;
}
a:hover .bar {
text-decoration: none;
}
http://jsfiddle.net/EAmwt/
Can someone explain what's going wrong in the second example? Inspecting with Chrome shows the span.bar has a computed style of text-decoration:none.
Update: a few answers explaining how to get around the problem, which is great except that's not really my question. What I want to know is why is this behavior different than, say, bold? For instance, if I try the 2nd example with bold, I get the expected results: http://jsfiddle.net/3qPyX/4/
Explanation:
The problem is that some properties (like text-decoration) get drawn to the whole parent inline element, whereas others - like font styling (that get inherited) - get overriden by the children properties.
Just for illustration: simmilarly, if you set a background color to a parent element it will paint the background of the parent ... and you would have to set another color to a child to lay it over (default - transparent - will still show the parent style through), but if you set font-weight at a child it will apply to the text inside the child element and override the parent settings.
You can find more detailed stuff on the text-decoration property in the CSS Level 2 and Level 3 Specifications.
A simple solution
withot changing the markup, you could just display .bar as inline-block.
Like so:
a {
text-decoration:none;
}
a:hover {
text-decoration: underline;
}
a:hover .bar {
display:inline-block;
}
And the inline-block breaks out of the inline/text styling of the parent anchor element =) And you can then style it independently:
DEMO
When you do the text-decoration it is applied to the entire line at once. So the a:hover .bar doesn't cause any effect, because the underline is not being applied in the .bar but on the a.
Here is the specification: http://www.w3.org/TR/CSS21/text.html#lining-striking-props
UPDATE! (As #Cam suggested) :
You need the add in separate elements the parts of your text: http://jsfiddle.net/3qPyX/5/
The CSS:
.foo, a:hover .bar, a {
text-decoration:none;
}
a:hover .foo {
text-decoration: underline;
}
Why does the CSS3 pseudo-element selection not change all parts of the highlight? As you can see in this screenshot I have selected part of the page, and parts of the selection are the default bright blue color:
This is the CSS that I'm using, it is at the top of my CSS file:
::selection { background: #3B3B3B; color: #fff; }
::-moz-selection { background: #3B3B3B; color: #fff; }
It seems like the highlight for inputs (text, checkboxes, etc.) and white space does not change. Does anyone know why this is, and is there a way to change it for every part of the page so the highlight color is consistent? I'm using Chrome.
The ::selection pseudo-element doesn't work properly in Chrome/Safari. <input> elements will be the standard highlight color. It's a very old and still outstanding bug:
https://bugs.webkit.org/show_bug.cgi?id=38943
The only workaround I've been able to come up with is using contenteditable elements instead of <input> elements.
Here's a demo I created: http://jsfiddle.net/ThinkingStiff/FcCgA/
And a post I wrote about it: https://stackoverflow.com/a/8529323/918414
I got this code:
<div class="class1">text</div>
CSS code of class1 is following:
.class1 {
text-decoration: none;
}
The output looks on, until I move the mouse over the div. The text is underlined then.
Sure, I've tried a lot of methods like:
.class1:hover {
text-decoration: none;
}
I've also tried to add a !important attribute, but still without expected results. :/
I've also used firebug to debug the HTML & CSS code, and I can't find any class with attribute text-decoration: underline;.
I know this is such a silly question, but I'm out of ideas.
You should set the text-decoration property to none for the a element inside of .class1, since that is the element that contains the text (and likely the element that you are hovering on).
For example:
.class1 a (all a tags whose ancestor is .class1)
OR
.class1 > a (all a tags whose parent is .class1)
If you're setting a global <a> property elsewhere, you'll need to specifically override the <a> tags for that class.
.class1 a { text-decoration: none; }
and
.class1 a:hover {text-decoration: none; }
depending on if you have a global hover defined too
div.class1 a { Properties:values}
Would be a good practice.
At http://www.wsl-ltd.co.uk/ i have a 'special offer' badge positioned absolutely with some text floated and relative inside.
For some reason, Webkit browsers are applying a red underline to some of the text - I have tried everything but just can't for the life of me work it out.
Does anyone know if this is a weird quirk of webkit, or is it my CSS? Cheers.
Bug in WebKit.
Define text-decoration:none; on the <a> element itself - should help.
The problem is with styles on <a> element. I think you could insert following to CSS to fix it.
.ie6wrap a {text-decoration:none}
(I checked it, you use .ie6wrap only for one element, so it should be safe)
If you want more details, following CSS is responsible for it:
a:link, a:visited, a:focus{
color: #d58d31;
text-decoration: underline;
}
You seem to remove underline on child elements of that <a>, but Webkit doesn't work in such way, because underline is under <a>, not on child <div>.
You have all the spans that contain the text wrapped in a single <a> tag, so the text is being underlined. You'll need to override the stylings to handle this, or move the <a> tag someplace else.
This happens because those spans are under
<a href="contact-us">
which has the following style:
a:link, a:visited, a:focus {
color: #D58D31;
text-decoration: underline;
}