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;
}
Related
I am attempting to build a page that offers RSS feeds, just title and dates of articles. This is a snapshot of what I have so far.
.wp-block-rss__item {font-size: 12px; color: #000000}
.wp-block-rss__item-publish-date {font-size: 12px; color: #000000}
Now, the second line of code, tells me I got something right. The font size and color both change the date to what I want. But the first line, only the font-size is working, I can change the article title (rss item) font size, but the color remains.
I am also trying to hide the bullet point image that flows from the RSS feed.
I tried
.wp-block-rss_item::marker {display: none;}
For what it's worth, this is my first attempt at this type of CSS manipulation, I'm using the Chrome developer tools / inspector to help identify what needs changing. Prior, I had a web page that used a paid theme, and would just post "how do I do this?" and someone would reply with code within a day or two. I'd like to learn to do these simple things myself. Happy to clarify anything or post other details from the Chrome tool.
Adding this in response to comments - my inspector view looks like this. (yes, a different rss feed from posted above, same issue for all the feeds)
Try using !important behind your statements to override already given properties.
For example:
.wp-block-rss__item {font-size: 12px; color: #000000 !important}
writing this to make it easier for people to find the solution that i wrote in the comments.
To fix this the easiest way is to change the .wp-block-rss__item {font-size: 12px; color: #000000} rule into
.wp-block-rss__item a {
font-size: 12px;
color: #000000
}
Why does this happen? To make it easy, you are dealing with CSS specificity, which is what makes CSS so flexible (while also making it difficult for people to approach it). So, to get on your point, every HTML element has it's "basic" styling, in the case of an a like yours it's blue colored and underlined like it was showing in the first screenshot, but why was your code changing the font-size but not the color? Simply because the "basic" styling of the a doesn't have a font-size, but it has a color and that color was overriding your rule, this is because for CSS the rules that were applied to the a are more specific than the rules applied to .wp-block-rss__item which was the parent of the parent of your a. Changing the rule like i suggested you tells the browser that every anchor inside a .wp-block-rss__item has to get that styling, which, in this case is more specific than the "basic" styling. I'll give you an example, maybe it's easier to understand
.parent{
color: red;
}
.parent .green{
color: green;
}
.kid a{
text-decoration: none;
color: black;
}
.kid .custom-link{
color: white;
background-color: red;
padding: 5px;
}
<div class="parent">
<span> This text is red </span> <br>
<span class="green">This text is green</span> <br>
This is a normal link <br>
<div class="kid">
This is a custom styled link <br> <br>
This is another custom styled link with a more specific selector
</div>
</div>
Notice how the normal link doesn't get the color of the .parent (red) BUT when i use a more specific class .kid a both links in the kid element get the style without the underline and the color black. The second link has a more specific class so it gets the color from that.
You can read Here and over here for more info. I know this might look scary and hard to understand, but trust me, work with CSS for a month or so and it will become natural.
Hope I explained myself good enough, let me know if you don't understand something
So I've been working on this for 2 days now and can't get my option box to change to black text.
I've tried the !important tag and even that is not overriding the white font color.
option {
color: #000 !important;}
https://www.outkastfabworx.com/checkout/
Is the the site.
The state and country select box will not display in black text unless I make the body font black, but then almost everything is black.
I've tried a few things I've seen on Stack but so far none of them have allowed me to override the style.
Any help is appreciated, even point me in the direction I need to look.'
Update: Screenshot of error
You do have to add an item to cart before you go to checkout so you can replicate the error.
Option can't be styled with css. WooCommerce uses jQuery for selects.
.select2-container--default li {
color: #444444;
}
.select2-container--default li:hover,
.select2-container--default li:focus,
.select2-container--default li:active {
color: #fff;
}
You may have to add !important on both (example: color: #444!important;) or use greater specificity or put this CSS after all other css as long as the specificity is the same.
¿Do you want to change the color of the text (in this case "Return to Shop" to black?.
Try this.
.button.wc-backward {
color: black;
}
ScreenShot
If that's not what you're looking for, you need to be more specific.
I have a style for inputs on my page, with some basic padding and font size, I tried applying the same style to a link, but for some reason the link is always larger (height) than the button no matter what I do, even with the exact same text and font size, I tried doing display: block but that just makes the button the width of the screen.
Here is the CSS:
.button{
padding: 10px 15px 7px 15px!important;
font-size: 16px !important;
color: white;
cursor: pointer;
border-radius: 2px;
text-decoration: none;
}
.button-3{
background-color: #ff4d4d;
border: 1px solid #ff4d4d !important;
}
I've looked at the Chrome styles panel and confirmed the font / padding is being used (it's not strikken through).
Here is what it looks like:
Looks like the issue is because:
You aren't using a CSS reset.
The line-height needs to be the same.
Make sure you give a consistent line-height to both. For now, set in the both:
line-height: 1.5;
This should fix it. Also, you can compare both the styles with the computed ones, to check if there's anything else being set. Since you say <button>, it might also have some border.
Also, like I guessed, you are also giving border and same colour as background to the button, making it look 2px bigger.
When you open the Developer Tools, try comparing the Computed Styles part:
To avoid this kind of stuff I always set the font family I used.
Take a look at this example: https://fiddle.jshell.net/tnr0jxka/
You also might want to consider adding:-webkit-apperance:none;-moz-apperance:none; to this kind of css, it will save you big time in cross-browser experience.
Buttons do not inherit the global styling automatically.
So, setting font-size of button explicitly will solve the problem
see this solution for more info
when I hover the mouse over it, the cursor doesn't change into hand until you actually over over the text. (For example, if you pay attention to SO navigation, your cursor changes into hand as soon as you touch the gray area. I am talking about Questions, Tags, Users, Badges, Unanswered navigation)
when I click on it, it borders the link-text.. like it's dotted border or something by default. How do I get rid of that?
There are two ways of getting the hand cursor on the entire area; either you make the link take up the entire area (perhaps by being the entire area), or you add the style cursor:pointer; to the area. (Making the link cover the whole area is usually the better option, as that also make the entire area clickable.)
To get rid of the dotted border on links when they‘re clicked:
a:active {
outline: none;
}
For SO navigation, it is done in following way:
<li class="nav">
Questions
</li>
.nav a {
padding: 6px 12px;
}
The gray area you see is actually the link itself (achieve by setting the padding). To get rid of the border, you should specify by a:link:
.nav a:active { outline: none; }
For (1), use the <a> around your whole <div>, not just the text, and that will make the cursor change to the hand cursor when entering the div. Another way is to change the <a> to have a style similar to
a { display: block; width: 300px; height: 100px; background: orange }
the background is just for trying it here. It can be removed.
For (2), use
a { outline: none }
Try using the following in your CSS.
a:focus {outline: none;}
However, I believe older versions of IE will not honor this code.
I have something like this
<h1>
Home
</h1>
Very simple. IE, FF render it smoothly, underline works fine. Safari does this weird thing I've never seen before, it underlines "Home" only where the font serifs & curves DONT touch the underline, i.e. the letter "H" would get underline between the two "pillars" (sounds weird i know), and where those two touch the underline, the latter becomes much lighter in color (#eee vs #000).
UPDATE:
Apparently Safari's not rendering the link well when there's
text-shadow: 0px 2px 1px #fff;
Is there a particular reason for this?
The reason is because the text-shadow is rendered on the frontmost layer. If I were you I'd add a border-bottom to the h1 a element with no text underline.
h1 a {
text-decoration: none;
border-bottom: 1px solid blue;
}
Of course, replace blue with whatever colour your links are.
Edit: Realized that the shadow could be fixed with a span tag.
I think having a bit of space between the underline and the baseline when using the drop shadow looks better, but if you must have a text-decoration: underline you would have to add a span element to your markup:
<span>Home</span>
CSS:
h1 a span {
position: relative;
top: 0px;
z-index: -100;
}