Is there a way to control the position of the underline in text-decoration: underline?
Example link
The example above has an underline by default...is there a way to nudge that underline down by a few pixels so that there is more space between the text and the underline?
2020
Use text-underline-offset!
2012
The only way to do that is to use a border instead of an underline. Underlines are notoriously inflexible.
a {
border-bottom: 1px solid currentColor; /* Or whatever color you want */
text-decoration: none;
}
Here's a demo. If that's not enough space, you can easily add more — if it's too much, that's a little less convenient.
You can use pseudo before and after like this. It works well and is completely customizable.
CSS
p {
line-height: 1.6;
}
.underline {
text-decoration: none;
position: relative;
}
.underline:after {
position: absolute;
height: 1px;
margin: 0 auto;
content: '';
left: 0;
right: 0;
width: 90%;
color: #000;
background-color: red;
left: 0;
bottom: -3px; /* adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot. */
}
HTML
<p>This is some example text. From this page, you can read more example text, or you can visit the bookshop to read example text later.</p>
Here's a more advanced demo with a screenshot attached I made that animates the underline on
hovering, changes colors, etc...
http://codepen.io/bootstrapped/details/yJqbPa/
There is the proposed text-underline-position property in CSS 3, but it seems that it has not been implemented in any browser yet.
So you would need to use the workaround of suppressing the underline and adding a bottom border, as suggested in other answers.
Note the the underline does not add to the total height of an element but bottom border does. In some situations, you might wish to use outline-bottom – which does not add to the total height – instead (though it is not as widely supported as border-bottom).
2021
There is the text-underline-offset property in CSS Text Decoration Module Level 4 which allows you to move the decoration by a specified distance away from its original position.
As of early 2020, this is only supported in Safari 12.1+ and Firefox 70+.
text-underline-offset property accepts these values:
auto - default, makes the browser choose the appropriate offset.
from-font - if the used font specifies a preferred offset, use that, otherwise it falls back to auto.
<length> - specify distance in the "usual" CSS length units. Use em to allow scaling proportionally with the font-size.
Example below:
p {
text-decoration: underline;
text-decoration-color: red;
margin-bottom: 1.5em;
}
p.test {
position: relative;
}
p.test::after {
position: absolute;
content: '';
display: block;
height: 1px;
width: 100%;
background: blue;
bottom: 0;
}
<p style="text-underline-offset: 0.75em;" class="test">
If you see our red underline <strong>below</strong> the blue line, this property works in your browser.
</p>
<p style="text-underline-offset: auto">
And now let’s try it with `text-underline-offset` set to `auto`.
</p>
<p style="text-underline-offset: from-font">
With `text-underline-offset` set to `from-font`, it probably looks the same as above.
</p>
2021
you can use text-underline-position: under;
<body>
<h1>
<a href="#"
style="text-decoration: underline; text-underline-position: under;" >
My link</a>
</h1>
</body>
for more details check https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position
Use a border-bottom instead of the underline
a{
border-bottom: 1px solid #000;
padding-bottom: 2px;
}
Change padding-bottom to adjust the space
Using border-bottom-width and border-bottom-style will make the border the same color of the text by default:
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
padding-bottom: 1px;
There is one property text-underline-position: under. But only supported in Chrome and IE 10+.
More info: https://css-tricks.com/almanac/properties/t/text-underline-position/
https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position
I would use border instead. Easier to control that.
Related
I did already find a post about using the <hr> tag to insert a line break, but when I looked up the tag on the w3 website (http://www.w3schools.com/tags/tag_hr.asp) it says that all attributes of the tag are not supported in HTML5. Obviously I want to make my website HTML5 compatible, so what would be the best way to insert a visible horizontal line?
Thanks
You can still use <hr> as a horizontal line, and you probably should. In HTML5 it defines a thematic break in content, without making any promises about how it is displayed. The attributes that aren't supported in the HTML5 spec are all related to the tag's appearance. The appearance should be set in CSS, not in the HTML itself.
So use the <hr> tag without attributes, then style it in CSS to appear the way you want.
Simply use hr tag in HTML file and add below code in CSS file .
hr {
display: block;
position: relative;
padding: 0;
margin: 8px auto;
height: 0;
width: 100%;
max-height: 0;
font-size: 1px;
line-height: 0;
clear: both;
border: none;
border-top: 1px solid #aaaaaa;
border-bottom: 1px solid #ffffff;
}
it works perfectly .
You can make a div that has the same attributes as the <hr> tag. This way it is fully able to be customized. Here is some sample code:
The HTML:
<h3>This is a header.</h3>
<div class="customHr">.</div>
<p>Here is some sample paragraph text.<br>
This demonstrates what could go below a custom hr.</p>
The CSS:
.customHr {
width: 95%
font-size: 1px;
color: rgba(0, 0, 0, 0);
line-height: 1px;
background-color: grey;
margin-top: -6px;
margin-bottom: 10px;
}
To see how the project turns out, here is a JSFiddle for the above code: http://jsfiddle.net/SplashHero/qmccsc06/1/
Instead of using <hr>, you can one of the border of the enclosing block and display it as a horizontal line.
Here is a sample code:
The HTML:
<div class="title_block">
<h3>This is a header.</h3>
</div>
<p>Here is some sample paragraph text.<br>
This demonstrates that a horizontal line goes between the title and the paragraph.</p>
The CSS:
.title_block {
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
margin-bottom: 5px;
}
I am answering this old question just because it still shows up in google queries and I think one optimal answer is missing. Try this code:
use ::before or ::after
See Align <hr> to the left in an HTML5-compliant way
I am trying to get rid of the thin border that appears for every image in Chrome & IE9.
I have this CSS:
outline: none;
border: none;
Using jQuery, I also added a border=0 attribute on every image tag. But the border as shown in the image still appears. Any solution?
body {
font: 10px "segoe ui",Verdana,Arial,sans-serif, "Trebuchet MS", "Lucida Grande", Lucida, sans-serif;
}
img, a img {
outline: none;
border: none;
}
.icon {
width: 16px;
height: 16px;
text-indent: -99999px;
overflow: hidden;
background-repeat: no-repeat;
background-position: -48px -144px;
background-image: url(theme/images/ui-icons_0078ae_256x240.png);
margin-right: 2px;
display: inline-block;
position: relative;
top: 3px;
}
<h1>Dashboard <img class="icon" border="0"></h1>
See attached screenshot:
It's a Chrome bug, ignoring the "border:none;" style.
Let's say you have an image "download-button-102x86.png" which is 102x86 pixels in size. In most browsers, you would reserve that size for its width and height, but Chrome just paints a border there, no matter what you do.
So you trick Chrome into thinking that there is nothing there - size of 0px by 0px, but with exactly the right amount of "padding" to allow for the button. Here is a CSS id block that I am using to accomplish this...
#dlbutn {
display:block;
width:0px;
height:0px;
outline:none;
padding:43px 51px 43px 51px;
margin:0 auto 5px auto;
background-image:url(/images/download-button-102x86.png);
background-repeat:no-repeat;
}
Voila! Works everywhere and gets rid of the outline/border in Chrome.
Instead of border: none; or border: 0; in your CSS, you should have:
border-style: none;
You could also put this in the image tag like so:
<img src="blah" style="border-style: none;">
Either will work unless the image has no src. The above is for those nasty link borders that show up in some browsers where borders refuse to play nice. The thin border that appears when there is no src is because chrome is showing that in fact no image exists in the space that you defined. If you are having this issue try one of the following:
Use a <div> instead of an <img> element (effectively creating an element with a background image is all you are doing anyway, the <img> tag really isn't being used)
If you want/need an <img> tag use Randy King's solution below
Define an image src
For anyone who wants to get rid of the border when the src is empty or there is no src just use this style:
IMG[src=''], IMG:not([src]) {opacity:0;}
It will hide the IMG tag completely until you add a src
Add attribute border="0" in the img tag
If u didn't define a src or the src attribute is empty in a img tag most browsers will create a border. To fix this use transparent image as src:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEgAACxIB0t1+/AAAAApJREFUeJxjYAAAAAIAAUivpHEAAAAASUVORK5CYII=" border="0">
If you are trying to fix the Chrome Bug on loading images, but you ALSO want your placeholder image to load use (with Lazy Loading images, for example) use can do this trick:
.container { overflow: hidden; height: 200px; width: 200px }
.container img { width: 100%; height: 100% }
.container img[src=''],
.container img:not([src]) {
width: 102%;
height: 102%;
margin: -1%;
}
This will make the border be hidden in the container's overflow and you won't see it.
Turn this:
Into this:
I liked Randy King's solution in that chrome ignores the "border:none" styling, but its a bit complex to understand and it doesn't work in ie6 and older browsers. Taking his example, you can do this:
css:
ins.noborder
{
display:block;
width:102px;
height:86px;
background-image:url(/images/download-button-102x86.png);
background-repeat:no-repeat;
}
html
<ins class="noborder"></ins>
Make sure when you use the ins tag to close it off with a "" or else the formatting will look funky.
In your img src tag, add a border="0", for example, <img src="img.jpg" border="0"> as per explained by #Amareswar above
using border="0" is an affective way, but you will need to add this attribute for each image.
i used the following jQuery to add this attribute for each image as i hate this outlines and borders around images.
$(document).ready(function () {
$('img').each(function () {
$(this).attr("border", "0");
});
});
inline css
<img src="logo.png" style="border-style: none"/>
You can remove the border by setting text-indent to a very big number, but the alt of the image also be gone.
Try this
img:not([src]) {
text-indent: 99999px !important;
}
I had a similar problem when displaying a .png-image in a div-tag. A thin (1 px I think) black line was rendered on the side of the image. To fix it, I had to add the following CSS style: box-shadow: none;
same as what #aaron-coding and #randy-king had - but just a more generic one to hide image border before they are loaded (i.e. with lazy-load.js or something
(apparently I can't do a code block in my original comment)
.lazy-load-borderFix {
display: block;
width: 1px !important;
height: 1px !important;
outline: none;
padding: 0px;
margin: -4px;
background-image:none !important;
background-repeat:no-repeat;
}
I fix it using padding style:
#picture {
background: url("../images/image.png") no-repeat;
background-size: 100%;
}
.icon {
height: 30px;
width: 30px;
padding: 15px;
}
The border is disappearing, while you are increasing padding value. Find your own value.
it worked for me. It took days which made me crazy.
img.logo
{
display:block;
width:100%;
height:0px;
outline:none;
padding:43px 51px 43px 51px;
margin:0 auto 5px auto;
}
the solution is to set the outline style to none (i.e.) outline:none, it's work with Me
First create an image type PNG transparent with photoshop in mini size.
Then in your class please add:
content:url("url of your blank png");
That happens because you are using an img tag with no src attribute. The solution is puting the image into a div. Something like that:
<style>
div#uno{
display:block;
width: 351px;
height: 500px;
background: url(especificaciones1.png) no-repeat;
}
div#dos{
display:block;
width: 612px;
height: 500px;
background: url(especificaciones2.png) no-repeat;
}
</style>
<div class="especificaciones">
<div id="uno" class="imag1"></div>
<div id="dos" class="imag2"></div>
</div>
I know you can draw with a canvas element, I just wanted to know if it was possible to draw a triangle next to a link without using a canvas element? I just want a small < 16px down arrow.
Here is my take on drawing a triangle in css. You can view it on JSFiddle. Have not done any browser testing (works in Chrome!)
The CSS is pretty simple:
.triangle{
display: block;
border-bottom: 16px solid transparent;
border-left: 16px solid red;
overflow: hidden;
position: absolute;
}
If you want it pointing in a different direction, just alter the borders. For example, the following will point the triangle downward:
.triangle{
display: block;
border: 16px solid transparent;
border-top: 16px solid red;
overflow: hidden;
position: absolute;
}
Edit: Works in latest IE, FF and Chrome.
Nope.
The closest you could get is by using an ASCII key, ↓ to be precise.
It produces an arrow like this ↓
Of course a background-image will do the trick, but that's quite obvious, innit? :)
U+25BC: Black Down-Pointing Triangle exists in Unicode. Here it is: ▼
You could use this CSS to apply it:
a:before {
content: "▼";
}
It's probably better to use a background-image though. That way, you would not depend on the existence of such special characters in the font the web browser uses, and it would show up in IE 6/7. For example:
a {
background-image: url("arrow.gif");
padding-left: 16px;
}
No. Just use a special ASCII character, &#darr;, no CSS required:
<span id = "down-arrow">&#darr;</span>
Here's my simple drawing for the triangle using CSS:
<div style="border: 11px solid transparent; border-right-color: rgba(0, 0, 0, 0.25);"></div>
If you need to change the direction, just replace border-right-color with border-direction-color.
And maybe you use position: absolute; and margin-top and margin-left properties to set the position.
The default weight of 1px for line-through property in CSS is great for body copy at 1em.
Unfortunately for larger items such as a price set at 3em on an offer site, 1px is really too light. Is it possible to set a heavier line weight for line-through?
If not, what alternatives should I consider, such as an image overlay for example?
You can do something like this in modern browsers
.strike{
position: relative;
}
.strike::after{
content: '';
border-bottom: 4px solid red;
position: absolute;
left: 0;
top: 50%;
width: 100%;
}
I <span class="strike">love</span> hate hotdogs
Made a fiddle of it too:
http://jsfiddle.net/TFSBF/
Here's another way to do it with a fake strike-through (which looks great and works on all browsers, albeit with the cost of a tiny imageload). The image is a black 1px by 2px box.
del {
background: url(/images/black-1x2.png) repeat-x 0 10px;
}
I think this is a browser implementation issue.
See this page http://jsbin.com/arucu5/2/edit
In IE8 and Firefox the line through width increases with the font size.
However in Safari and Chrome it remains at 1px
You can always a dirty Ghetto method like this
http://www.overclock.net/web-coding/167926-ghetto-css-strike-through.html
This should work:
<style>
span.strike {
font-weight:bold; /*set line weight here*/
color:red;
text-decoration:line-through;
}
span.strike>span {
font-weight:normal;
color: black;
}
</style>
<span class="strike"><span>$20.00</span></span>
I've found another approach to set line weight for multiline text:
span {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAIAAADdv/LVAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAASSURBVHjaYvrPwMDEAMEAAQYACzEBBlU9CW8AAAAASUVORK5CYII=');
background-repeat: repeat-x;
background-position: center;
}
Here is an example:
http://output.jsbin.com/weqovenopi/1/
This approach assumes repeating an image (1px width and npx height). Also it works independent on the font-size.
Only one disadvantage - background renders under the text.
You can thicken the line with style.
For example:
text-decoration-thickness: 3px;
I'm trying to style my form buttons and I'm experiencing a problem in Firefox that I can't get to the bottom of...
I want to style certain <a />s and <input type="submit" />s to look the same (I have a button background image, using a sliding-doors technique to apply a hover effect.)
This all works great, except in Firefox, the input submit text is slightly lower down than it should be. IE and Safari/Chrome work fine.
(source: muonlab.com)
Anyone got any ideas?
Thanks
<div class="buttons">
« Back
<input type="submit" class="button btn-large-green" value="Save changes" />
</div>
.button
{
cursor: pointer;
border: 0;
background-color: #fff;
color: #fff;
font-size: 1.4em;
font-weight: bold;
outline: 0;
font-family: Arial, Verdana, Sans-Serif;
}
a.button
{
display: block;
float: left;
text-align: center;
text-decoration: none;
padding: 5px 0 0 0;
height: 22px;
margin-right: 1em;
}
.btn-small-grey
{
height: 27px;
width: 96px;
background-position: 0 -81px;
background-image: url(/assets/images/buttons/buttons-small.gif);
}
.btn-large-green
{
height: 27px;
width: 175px;
background-position: 0px -54px;
background-image: url(/assets/images/buttons/buttons-large.gif);
}
I found this post because I had resolved this problem a few months ago and when I ran into it again today, I couldn't remember what I'd done. Nice. After poring over my css I finally located the "fix". I can't take credit because I found it on the web somewhere, but hopefully it will be as useful to you as it has been for me:
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
I hope this helps.
I have same problem every time I need to style form buttons. Sorry, quite busy at the moment so only brief description how I usually fix it.
In FF Text is usually a bit lower, exactly like on the image you attached and so then I simply apply "padding-bottom" on the button itself. It moves the text on the button number of pixels up.
The problem is it also moves text in IE and now IE looks a bit off. To fix that I apply "line-height" to the same button with exactly same value as the height of the button. That makes IE to ignore padding completely and positions the text right in the middle. Below is sample HTML code:
<input type="submit" value="SEARCH" class="search"/>
and CSS:
.search
{
background: transparent url(../images/sprites.gif) no-repeat -310px 0; /* some button image */
height: 29px;
width: 104px;
border: 0;
/* centering text on button */
line-height: 29px; /* FF will ignore this but works for IE. This value should be same as value of the height property above */
padding-bottom: 2px; /* IE will ignore but works for FF */
}
Sorry I didn't applied it directly to your code but I'm a bit busy at the moment, hope you got the idea and it helps though.
ps. just checked in IE8 and all above moves text few pixels up. So it means more (endless?) mocking around with padding top/bottom.. I lost my patience now though and I think I'll be putting all this in separate stylesheet from now on that is until I find some fairly easy and universal solution for all this
Inputs are formatted not following the W3 box model convention in different browsers, you might want to include:
input /*Content follows box model*/
{
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
height:24px;
}
Also include for firefox (which Shelly pointed out):
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
Otherwise you could use button
I collected all these solutions from various sources, they deserve the credit
I had the same problem and I've solved (only for FF and Safari) by fixing the width but not the height and playing with the values: padding (top and bottom), line-height and if needed setting the vertical-align to middle. However all it's more easy to do if you set all the values (even the font size) in pixel.
EDIT: I think that there isn't a cross-browser solution, because the problem is due to the text rendering of the browsers. To solve completely the problem you could draw a background img with text and apply that image to the link or the button.
Even if with this solution you lose in accessibility.
Alternatively you can use conditional CSS statements to improve the layout for each browser.
You could also consider replacing the the button with a different element altogether. The anchor element works perfectly. Just add a 'submit' function to it's 'onClick' event and you'll be good to go. I think this is a better (and simpler) cross browser solution.