Should the following line of CSS work for adding padding to regular underlines? Not links, just when I underline one or more words for emphasis. Nothing seems to change.
.underline {
padding-bottom: 2px;
border-bottom: black 2px solid;
}
Cheers!
Underlined text doesn't have a class .underline whose settings you could change. It has a setting: text-decoration: underline , which is not the same as border-bottom. Some browsers allow additional parameters for text-decoration to style it to a limited extent, see https://caniuse.com/#search=text-decoration . However, the results really often look different between different browsers...
.a {
text-decoration: underline;
}
.b {
border-bottom: 1px solid black;
padding-bottom: 3px;
}
<p>This is an example for <span class="a">underlined text</span> within a phrase. Usually a <span> element is used to apply "text-decoration: underline". The vertical distance to the baseline of the text depends on the browser and usually can't be changed.</p>
<p>A "border-bottom" is <span class="b">something completely different</span>. Here the distance to the text can be set manually by using a "padding-bottom".</p>
In a website menu, I have implemented some wishes of my customer concerning typography in CSS. She needs a different tracking on the font, no problem. But, she wants the active link to be underlined. As I have not implemented the code to target the active link, I just underlined them all to see how it would look. The CSS is as follows:
.main-navigation a {
display: block;
color: black;
font-weight: bold;
letter-spacing: 0.45em;
line-height: 4.5em;
text-decoration: underline;
text-transform: uppercase;
}
And this is the result:
The problem is that the letter spacing kind of messes up the underlining. I've drawn some vote magnets freehand circles to indicate the problem. The line starts nicely at the left side but is extended with the value of letter-spacing to the right.
Screenshot is from Firefox 25. Jsfiddle to see for yourself.
I could solve this using borders and using margins instead of line height, but is this fixable otherwise?
CSS Text underlining too long when letter-spacing is applied?
http://jsfiddle.net/isherwood/JWcGh/2
.main-navigation a:after {
/* absolute positioning keeps it within h1's relative positioned box, takes it out of the document flow and forces a block-style display */
position: absolute;
/* the same width as our letter-spacing property on the h1 element */
width: 0.45em;
/* we need to make sure our 'mask' is tall enough to hide the underline. For my own purpose 200% was enough, but you can play and see what suits you */
height: 200%;
/* set the background colour to the same as whatever the background colour is behind your element. I've used a red box here so you can see it on your page before you change the colour ;) */
background-color: #fff;
/* give the browser some text to render (if you're familiar with clearing floats like this, you should understand why this is important) */
content: ".";
/* hide the dynamic text you've just added off the screen somewhere */
text-indent: -9999em;
/* this is the magic part - pull the mask off the left and hide the underline beneath */
margin-left: -.40em;
}
So... I created this weird solution to a weird problem: I needed shadows with straight sides, like a gradient with clean sides instead of a box-shadow.
I used an :after element to attach a gradient to the bottom of the elements that needed it (in the sample, this is commented out). I then tried an inset shadow with negative size and this works the same way. These work perfectly except for one minor detail: I can't use it like a shadow because the elements it covers sometimes aren't clickable.
Sample: http://codepen.io/syren/pen/jlcym
Some things I've ruled out already:
1) Using inset-shadows on the elements underneath: It needs to be applied to the original element or else it won't function like it's shadow when things move. If I could figure out
2) Using a box-shadow with negative spread or size: This works, and I would use this except it doesn't look like how the designer wants it to.
3) Z-index: It's messy because it's a very dynamic page, so I can use it in some places but not in others because seeing as its a shadow, it should be over everything visually at least.
So, to recap, I want it to look exactly the way it does with the clean edges, and I need it to be attached to the element not the surrounding elements and I'd really like it to be a pure CSS solution, like with pseudo-elements.
Any ideas?
http://codepen.io/anon/pen/cuJqG
html:
<nav>
<h1>I'm an Example Header</h1>
</nav>
<section>
<h3>You can't click me because the shadow above is covering me!</h3>
css:
nav{
border-bottom:3px solid #000;
position:relative;
}
h1{
font-family: "Helvetica";
text-transform:uppercase;
margin: 20px 10px 10px;
}
h3{
font-family: Helvetica, sans-serif;
font-weight: 600;
padding:10px;
margin:0;
cursor: pointer;
width: 98.75%;
color: white;
background: #ff0000;
box-shadow: inset 0 20px 40px -20px #000;
}
Changing the border-bottom attribute along with removing text-decoration creates the colored underline in some browsers (I can vouch for FF 5 and 6 for sure). But other browsers (at least Safari & Chrome) don't display any line.
For example of the problem, see utsarotaract.org (there is a link in the bottom paragraph of the index page).
Since I've seen this work other places, I'm assuming that some of my CSS is clashing but I'm stumped as to where exactly the problem is.
The issue is the size of your border. Change your 0.5px border to 1px instead and it will work. Live example: http://jsfiddle.net/tw16/WcrNA/
.content a {
border-bottom: 1px solid #A80532; /* instead of 0.5px */
color: #000022;
text-decoration: none;
}
You may want to use:
<a><span>I'm a link</span></a>
with the following CSS:
a {
color: blue;
}
span {
color: green;
}
The alternative being using a border-bottom. It's also a cross-browser solution. You'll just have to set its padding/margin/line-height to make it consistent from a browser to another.
What is the difference to use {text-decoration: underline} and {border-bottom: ...}?
which is easy to style and cross browser compatible?
when we should use border-bottom over text-decoration: underline?
Would it be good to use border-bottom always in place of text-decoration: underline?
border-bottom puts a line at the bottom of the element box. text-decoration:underline renders the text underlined. The exact difference depends on the HTML and text layout engines in use, but in general if you want text underlined, then underline it.
Sorry to say this, but some answers here are misleading. Splitting a line of text does not place the border at the bottom of the entire block, because of the nature of inline blocks. Borders under links are actually more consistent across browsers than text-decoration: underline.
See: Text-Decoration vs. Border-Bottom
As Ignacio said, border-bottom will put the line at the bottom of the containing box, whereas text-decoration:underline will actually underline the text. This becomes an important distinction for multi-line strings.
I am a single line and will look similar for both methods
---------------------------------------------------------
would probably render the same for both styles, but you'll get the following for multi-line strings.
I am a string that has been
split and added a border-bottom
-------------------------------
I am a string that has been
---------------------------
split and underlined
--------------------
Apologies for using code formatting rather than properly rending these examples, but you can see the point I'm trying to make.
bottom-border lets you control the distance between the text and the underline, so its more versatile. And (as mentioned above) it allows a different color for the underline (although I don't see a reason why you'll want to do that).
text-decoration is more 'correct' because it is the 'real' CSS property meant for underlining text.
if you set text-decoration: underline for all links then you will have to set text-decoration: none for special links which you don't need an underline. but if you use border-bottom instead, you'll save one line of CSS code (provide you set text-decoration: none in your reset CSS.
so all in all, i'll vote for border-bottom if you have a complex layout with different styles for each link but text-decoration for a simple website coded 'by the book'.
While there are always going to be cases where one is more appropriate than the other, border-bottom offers much more precise control over text-decoration and is therefore probably the preferred method. Here's a quick (likely not exhaustive) list of properties that border-bottom can control/enable that text-decoration cannot:
Spacing between text and "underline"
"Underline" style (dotted, dashed, solid, gradient, image)
Thickness
CSS transitions/animations
Separation of color between text and "underline"
In many cases, most of these abilities will not be needed - but it is good to have them available! I've switched to using border-bottom primarily for the ability to put a few pixels of padding between the text and the underline; the next most common use I've found is divorcing the underline color from the text color.
With CSS variables now shipping in every major browser, a "reset" stylesheet might look something like this:
:root {
--link-color: blue;
--hover-color: purple;
--underline-color: var(--link-color);
}
a {
color: var(--link-color);
text-decoration: none;
border-bottom: 1px solid var(--underline-color);
}
a:hover {
color: var(--hover-color);
border-bottom-color: var(--hover-color);
}
This way, links will display as expected on a "default" basis, yet still allow for customization as needed.
setting your text to display inline (actually, it should be that by default) will cause the border-bottom to render much as a text-decoration rule.
however, i presume that you want to use this technique on links by doing the following:
/* my super eye catching dual colour link */
a {
color:black;
border-bottom:1px solid red;
}
which is all well and good, but you'll find that wherever you have an img tag inside a link, the image will have a red border under it.
if you can figure out a way to target the parent of a page element (the image) using existing selectors and no javascript, i'll buy you a beer but i don't think you'll have much luck.
using "text-decoration" avoids this issue altogether as an image is clearly not text, it will not render an underline when inside a link.
if you have complete control over your markup, i suppose you can bumble your way through by adding classes to every link, but if you're working with any popular CMS system, you're going to struggle with this idea.
Try this border with 1px image
a:hover {
background: url("img/bg-link-hover.png") repeat-x scroll 0px 92% transparent;
background-color: transparent;
background-image: url("img/bg-link-hover.png");
background-repeat: repeat-x;
background-attachment: scroll;
background-position: 0px 92%;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
}