- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Why doesn’t underline behave correctly in WebKit browsers, is this a bug or feature? In Firefox it works just fine.
It just shows it as a 1px underline even with a big font? How to fix this? I’m trying to add shadows to H1 and it looks like i have to add bottom border to fix this. But when i want to add shadow to this bottom border to make it look smart i would have to put it in div. So it this the only way to go?
Sample code:
text-decoration-underline
text-decoration: underline
I’m pretty sure that’s just how it works.
For me, it’s much preferred, but I can understand where you’re coming from.
You could use border-bottom instead to create a thicker underline. It would be a bit more tricky to add a drop shadow to the border though (I’m thinking you might be able to make something work with box shadow).
Here’s one way you could do it with pseudo classes:
h1 {
display:inline-block;
text-shadow:1px 3px 5px #ccc;
font-size:36px;
}
h1::after {
display:block;
height:5px;
background:#000;
content:'';
width:100%;
clear:both;
box-shadow:1px 3px 5px #ccc;
}
@TheLeggett I can not get the shadow show up on your solution. Maybe i’m doing something wrong. I’m pretty new with preudo classes.
My clumsy solution to the problem where like this:
text-decoration-underline
text-decoration: underline
That works too, it’s just a bit more syntax heavy. As far as I’m concerned though, if that’s a style you need, and that’s the only way you can implement is in all the browsers you’re designing for, it’s a good solution.
@TheLeggett my bad.. Your solution works just fine on WebKit. For some reason I looked at it only in Firefox, and your code did not have moz shadow :) I am still wondering how this pseudo class solution works with IE. Thanks for the help.