Text-Decoration: Underline Vs Border-Bottom

text-decoration: underline vs border-bottom

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.

Using border-bottom instead of text-decoration for hyperlinks - is it semantically correct?

HTML semantic has nothing to do with CSS styles. Semantic is concern with using the right tag for the job, and since you are using an anchor element for a link, your code is semantically correct. Now, the rule of thumb when talking about accessibility is that each element should be visually differentiated from each other, but using more than just color. As long as you are using another visual cue (apart from color) to differentiate your link from the text around it, you are good to go, and using a border is definitely a good example of that.

Style text-decoration differently or make a border on each line

You could try making a background that simulates a dotted line and then use that on your paragraphs. Just make sure its height has the same value as the paragraph's line-height attribute so it matches the rows properly.

For example, if you want your line to be a 3px dash with a 1px space, you would then make a 4px wide by X pixels high image (where X of course is the height of your text line), and just have it repeat.

Hope this helps.

Underlining Hyperlinks - Text-decoration vs. Border-bottom and Browser Inconsistencies

I'm going to bet the culprit is inline-block as a display setting. See the difference (in Firefox) at http://jsfiddle.net/s8FYS/6/.

EDIT: Some further investigation reveals that inline Firefox (looking in Firebug) sets the height to auto which ends up less than the actual line-height, whereas inline-block calculates the height (since it is now acting like a block) equal to line-height * font-size, which pushes the border down.

You can "compensate" for it by setting the height (in this fiddle, a 1.35em worked with my default font-size of 16px), but I'm not sure that doing such would necessarily compensate correctly at all times.

Text-decoration with border-bottom, ul vertical center - li's jumps when hovering on it

To prevent the "jumping", compensate for your 3px border by adding a 3px bottom pad when the border is not in use (not hover), and remove padding when the border is in use (hover).

#menu > li {
    ...
    padding: 0 25px 3px 25px;
    ...}

#menu > li:hover {
    ...
    padding-bottom: 0px;
    ....}

Updated Fiddle: http://jsfiddle.net/seadonk/kppzqqo3/

How to increase the gap between text and underlining in CSS

No, but you could go with something like border-bottom: 1px solid #000 and padding-bottom: 3px.

If you want the same color of the "underline" (which in my example is a border), you just leave out the color declaration, i.e. border-bottom-width: 1px and border-bottom-style: solid.

For multiline, you can wrap you multiline texts in a span inside the element. E.g. <a href="#"><span>insert multiline texts here</span></a> then just add border-bottom and padding on the <span> - Demo

How to animate a link underline with border-bottom, so that there is space between the link text and the underline?

The code you've presented uses a pseudo-element not the default text-decoration. Since the pseudo element is positioned absolutely, you can change the distance easily. Change the a:before bottom to -5px or whatever negative value fits the distance that you want:

a {  position: relative;  color: #000;  text-decoration: none;}
a:before {  content: "";  position: absolute;  width: 100%;  height: 2px;  bottom: -5px;  left: 0;  background-color: #000;  visibility: hidden;  -webkit-transform: scaleX(0);  transform: scaleX(0);  -webkit-transition: all 0.3s ease-in-out 0s;  transition: all 0.3s ease-in-out 0s;}
a:hover:before {  visibility: visible;  -webkit-transform: scaleX(1);  transform: scaleX(1);}

<a href="#">Long long text</a>

Transitioning underlines for multiple lines of Text

#borderText { border-bottom: 1px solid white;  transition: .5s; display: inline;cursor: pointer;}
#borderText:hover {  border-bottom: 1px solid black;}
#textDecor {  text-decoration: none;  transition: .5s;  }
#textDecor:hover {  text-decoration: underline;  }

<p id="borderText">  Lorem Ipsum Sit Amet<br />  Some other Text<br />  Some Other Text<br /></p>
<p id="textDecor">  Here is some text<br />  with text-decoration and<br />  as you should see, the text<br />  is underlined but cannot be transitioned<br /></p>

---

Related Topics