That’s a great effect. padding-bottom: 4px; However, if someone would like to experiment with it, here are the changes: a {
But this specific underline is a bit different because it uses custom animation timing.
Definitely a clean choice for any website and it’s a nice way to alternate your underline color too.
Like and Follow Me on Facebook to connect with me, see exclusive Facebook-only webinars, Q&A’s and to get exclusive deals and offers I only provide to my FB followers!
You can of course write 1.5em or 150% if you prefer.
color, font-family, background, etc.). Hey, don’t blame me. Plus there’s always the chance that if you’re patient enough, all your underlines will look awesome later on without you having to change a thing.
Or just avoid using an underline altogether. It means 1.5 times the base value. By emulating an underline using border-bottom, we gain control over color and thickness. You can apply a border to the bottom of the link, which gives you control over the color of the underline (whereas text-decoration will only apply an underline in the same color as the text of the link itself) and also the pattern of the border: Link To Us! See a collection of examples of the methods mentioned above. One more thing to add to the toolbox. At smaller sizes, it can look pretty decent, but increase the font size and the same line starts to feel clumsy. Here’s another style that really can work on any website.
Not sure how this will hold up, but it works in Windows – Opera 7.23, IE 6.0, and NN 7.1.
background: url(underline.gif) repeat-x 100% 100%; ALA straight up ignores that.
If a site validates without the unit of measurement, then said unit is unecessary. Who could hate it? By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy. white-space: nowrap; If you want your underlines to really stand out from all the herd this set is a great place to start. What would be a better approach to write methods which returns several different string outputs? http://stackoverflow.com/a/32145544/947370. business, with a local development tool to match. Three days of design, code, and content for people who make websites. the line-height of your text to add more space between the bottom of one line
What was so freakin wrong with blink? /* bla bla bla */ I’ll let you know when my next tutorial, podcast or post drops and promise not to bombard you with spammy emails. Web design, especially as it pertains to CSS is very much like OZ….whoops that was another article … I meant to say very much like a Harley Davidson.
Whatever you'd like to tip is much appreciated! As such this is a great reference article for using a CSS technique to make it all a bit more visually swinging while retaining a valid clean markup that can also be read on anything that eats HTML without the CSS.
Let me point something out to you–ALA does not ignore that IE is the most used/popular browser. i like this, but don’t know if i will use it.
What would be nicer would be to expand the outline of the shape, but to use a non-zero winding rule rather than the more common even-odd to distinguish the inside and the outside of the glyph.
Nothing new is to be gained from continued arguments of the “yes it is, no it isn’t” variety. Ok, put on your radiation suits. Medium wasn’t trying to do anything crazy; they just wanted to create a pretty normal-looking line below their text. “Blink was reported to cause some people with epilepsy to have seisures. But as you can imagine, it takes a lot of time and effort to put these together. I say it’s a hack, and a good-but-not-perfect one. Work on any backgroundI think these are all pretty reasonable things to ask for, but as far as I know, there’s no intuitive way to achieve all of them i… It seems to me that hacks are more and more often defined as "Anything that shows that CSS can actually be both useful and cool, because hey, we all know it isn't, so if someone proves that it is, it's gotta be a hack." Finally, I want to thank Dante for showing me that I’m not the only one to hit the submit button too soon. There I have used pure CSS to create this effect, there is no JavaScript of any other library. text-decoration-color lets you change an underline’s color separately from its text color.
That would be a Hack.
To wax a bit hippie, the web is about freedom. }. Note this does rely on a bit of JavaScript to keep the line in-tact. All of your demo links appear to be broken. :] Future comments on just about anything else to do with the article are welcomed and will be enjoyed. Underline.js is fascinating. It can be built to factory spec (in this case W3C specifications), never do a thing to it (other than regular updates) and it will always be exactly what it is supposed to be…an accessible no nonsense web site. I haven’t tried this in other browsers. That means you’ll need a solid background for this to work.
When we think about it, our whole industry depends on our faith in a handful of "black boxes" few of us fully understand: browsers. Just wanted to let you know that the animated rollover works fine in he new version of Safari (1.2). background-image comes the closest to everything we want and with the fewest gotchas. I decided accomodating resizable fonts was preferable and changed the code. The link in your second paragraph acts strange in IE6 in Windows2K (I haven’t tried other versions of IE). But it’s also dynamic enough to work with any link on the page, so it doesn’t matter how you format the text. appropriate for some websites. To apply underlines to links that are slightly different than the simple text-decoration: underline, you can switch off the underline and use some other jiggery-pokery to achieve underlining effects. The property even has better-than-expected browser support — it works in Firefox and prefixed in Safari.
While it does let you have custom underlines for links that wrap… it’s much faster and easier to use Nice article, but I think border bottom with text-shadow looks great. How to disable text selection highlighting. I am surprised that it doesn’t do that, considering the W3C decided to allow arbitrary bullets in lists.
Future comments limited to whether or not the poster considers the method a hack will be deleted. Join my mailing list and get exclusive discounts to my courses, layouts & more.
The gradient runs through CSS3 so you can change the colors to anything you want. On the related subject of creating custom hyperlinks, I wonder if anyone knows a fix for the following problem.
Most of us got into the computer foray because we like to tackle problems and solve them in creative ways, even if that requires some intersting contortions and purposeful misapplication of code. But it doesn’t stop there. >> 1.5 what? Ask Question Asked 3 years, 8 months ago. I noticed a variation of this technique in the http://www.csszengarden.com/?cssfile=050%2F050%2Ecss Zen Garden submission. Well first of all, addressing Dante, your comment/rant is inappropriate, doesn’t address the article, and doesn’t really make a point other than to say you you dislike ALA, yet feel they owe you something because apparently YOU are the only person who can raise their articles to some perceived respectable level. Solved. Another way to apply more interesting underlines to links is to use small background images aligned to the bottom of the link that repeat horizontally: If you use this approach, you’ll need to make sure that the containing block (in this case a paragraph) has the room for the underline. Like it or not, IE is the most used browser.
Make sure your fake underline is not the only hint that some text represents a hyperlink.”, Agreed!
your coworkers to find and share information. Source Code . Now, when you click on the submit button, a “box” of dotted lines appears inside the submit button. I’ve seen this effect on a few websites and it’s probably one of my favorites. But with some ingenuity developer Will King built this pen creating a dynamic underline effect that can span multiple lines without any bugs. Check out this background linear gradient method here: http://www.csszengarden.com/?cssfile=/063/063.css.
One thing I’d appreciate and therefore note here as a suggestion: text-decoration: none; Maybe you remember the article Crafting link underlines on Medium. Repeat across wrapped text 5. Earlier I mentioned customizing underline styles to fit with descenders in type.
>>> Check it out on Github. Place it at the bottom left position of the element with.
additional visual cues to the differences between the types of links contained white-space: nowrap; Stack Overflow for Teams is a private, secure spot for you and CSS-Tricks* is created, written by, and maintained by Chris
This one might hurt…. Now the dashed underline will go only as far as the text does, and you don’t have to use images. of the link element. I have to thank that person who refered to this valuable ALA resource as an “idiot magnet.” Until I read that statement, I was blissfully unaware of its truth, at least in one case.
And this method blows away doing a standard “text underline” text effect with HTML. nips and tucks, you can take back creative control of the way your technique: This static underline and this rollover
Setting "LANG=C LC_ALL=C" in script has no effect on padding length for non-English characters in printf, Tuning the lowest bass string a hair flat. 1.5 is perfectly legitimate per CSS1. I just wanted to update any Safari 1.2 users out there that the animated underlines appear to work fine.