I have already visited this:How to increase the gap between text and underlining in CSS but my approach uses tags. The OP in the above question uses a css text-decoration:underline the approaches provided there are different
I have a heading which is underlined in my webpage.
<h1><u>Hello</u></h1>
But the gap between the text and the underline is small so I tried this:
u
{
padding-top:10px;
}
and this:
u
{
margin-top:10px;
}
But the gap between the text and the underline is still the same. Any idea how I can increase the gap?
Try this solution:
u {
padding-bottom:10px;
text-decoration:none;
border-bottom:3px solid #000;
}
<h1><u>Hello</u></h1>
The problem of your way of finding the solution is that the u element is using text-decoration for the bottom border. This border can not be moved because it is on the text. The solution is to remove the text-decoration for this and add a own border at bottom. Now you can increase the space between the content of h1 and the border with padding-bottom.
If you want to use the u element on other elements normaly you have to write h1 u on your CSS.
The <u> tag has been deprecated in HTML 4 and XHTML 1, but it has been re-introduced in HTML5 with other semantics.
If you want to underline the text, you could create a wrap element like this:
<h1><span class="underline"><span>Hello</span></span></h1>
span.underline{
padding-bottom:3px;
border-bottom:3px solid black;
}
You could increase the gap between the text and the underline by changing the padding-bottom
<h1><a>Hello</a></h1>
a
{
vertical-align: top;
border-bottom-width: 2px;
border-bottom-style: solid;
text-decoration: none;
padding-bottom: 2px; //You can adjust the distance here.
}
http://jsfiddle.net/74vn0shc/
Related
What's the most straightforward way to style HTML headings such that they are both underlined and horizontally centered? I don't want the underline to extend to the full width of the container, just the words. I also want the underline to be a different colour from the text and some distance away.
At the moment I am using a span inside the h2 to achieve this (in Sass):
h2 {
text-align: center;
span {
border-bottom: 2px solid #e6ebdf;
}
}
Is there a way to do so without an inner span or adding styles to the parent container? Here's the result. Note how the underline is (a) a different colour from the text and, (b) not tight against the bottom of the text the way it would be using text-decoration: underline:
Another idea is to use table to center and then apply a gradient where you can easily adjust the size, position and color:
h2 {
display:table;
text-align:center;
margin:auto;
padding-bottom:5px; /*control the distance*/
background:
linear-gradient(red,red) bottom /80% 2px no-repeat;
/* position /width height */
}
<h2>Hello</h2>
You can do this with the following:-
h2 {
text-decoration: underline;
text-align: center;
text-decoration-color: red;
text-underline-position: under;
}
<h2>Hello</h2>
Browser support maybe limited though, you may need to check.
Ingredients: just an input tag of type text.
Question: How can I control the size, color, position of text-decoration: underline styling the input tag?
I saw that text-decoration-color is available but only in the moz web interpreter and I want something cross-browser like.
[EDIT] I accept JS, CSS, HTML, doesn't matter, but not any workaround: my question is specific, I want control over this specific attribute.
the easiest way is to remove the text decoration as :
text-decoration: none;
in your css file and use
border-bottom: 1px solid #FF0000;
instead of that, you can now change the color and size :)
what if you use
text-decoration: none;
border-bottom: 10px solid black;
so you have control over the border properties
You can simply use the CSS3 text-decoration-color property, it works with Chrome too.
Demo:
a {
text-decoration: underline;
-webkit-text-decoration-color: green;
text-decoration-color: green;
}
This is just a link
Note:
Notice the use of -webkit-text-decoration-color to make it compatible with Chrome.
You can check text-decoration-color Cross browser cpompatibility for further details about its browser support.
editing the text-decoration like, as you told, the color is possible. but font-size, position and more is hard. What you could do is instead of using the text-decoration is adding on your lets say <p> tag a border-bottom. Of this border you are able to change size and color. If you want to change the position or other things you should think of maybe adding a <div> with a <style> to edit all sort of things.
Use
text-decoration-color: #E18728;
text-decoration: underline dotted red;
Ref links:
https://css-tricks.com/almanac/properties/t/text-decoration-skip/
https://css-tricks.com/almanac/properties/t/text-decoration-style/
https://css-tricks.com/almanac/properties/t/text-decoration-line/
https://css-tricks.com/almanac/properties/t/text-decoration-color/
Here is another advanced way to get this done
HTML
<div class="underline-text"> This is Underlined text </div>
CSS
.underline-text{
position:relative;
padding-bottom:5px;
display:inline-block;
}
.underline-text:after{
position: absoulte;
bottom: 0px;
content: " ";
width:100%;
background:red;
height:2px;
left:0px;
}
Here is codepen.
https://codepen.io/sajiddesigner/pen/QvgeGO
You can do experiments there.
I Hope This example Help You :
a {
outline: none;
text-decoration: none;
border-bottom: 2px solid orange;
padding-bottom: 5px;
}
Hello World!
text-decoration is shorthand property for text-decoration-color, text-decoration-style and text-decoration-line.
syntax{
text-decoration : text-decoration-line text-decoration-style text-decoration-
color;
}
a{
text-decoration : underline red double;
}
So you can simple use text-decoration or individually define each property.
text-decoration-line - Is a style assigned to element and that can be underline, line-through, overline and such.
text-decoration-color - Is a color assigned to element.
text-decoration-style - Behaves much like
border-style, so you could use double, solid, dotted and such property values.
You can read more on this site.
And for compatibility with browser check on caniuse as some properties are partially supported.
a{
text-decoration-line:underline;
text-decoration-color:red;
text-decoration-style:double;
}
Text Decoration
Color and style of text-decoration
Text decoration is limited in CSS. The specs in CSS3 says you have these settings but actually only firefox supports them:
text-decoration-line
text-decoration-style
text-decoration-color
Size of text-decoration
You have a little bit control of the size of the line with font-style attribute. So as you can see it is relative to the font-size.
p {
text-decoration: underline;
}
#test1 {
font-size: 14px;
}
#test2 {
font-size: 40px;
}
<p id="test1">test 1</p>
<p id="test2">test 2</p>
Position of text-decoration
There is the attribute text-underline-position. But as the other attributes it is mostly not supported by the major Browsers. So sadly it is not possible to control the position of the text decoration.
I'm trying to underline and overline a line until the end of the line , but this CSS code
.statistics_lines {
text-decoration: overline underline;
}
only marks an underline & overline for the words only .
How can I force the entire line to be underlined , with the words ?
Like that :
There isn't a way using text-decoration since that style is the decoration added to the text of that element. You could use multiple spaces ( ) but it'd be sloppy and wouldn't always be the width of the element.
Since we are talking about a single line, you can use the border of your element to get what you are looking for. If the element is inline, you will need to change its display style.
I've also added padding:
.statistics_lines {
display:block;
border-top:1px solid #DDD;
border-bottom:1px solid #CCC;
padding:7px 4px;
}
<span class='statistics_lines'>this is my line</span>
Use border instead. Like this :
.element {
border-bottom: 1px solid #eee;
}
<div class="element">This is a test</div>
You can "play" with it in order to obtain any style you want. Example :
.element {
border-bottom: 1px dotted #888;
padding: 15px 0;
}
<div class="element">This is a test</div>
If you are talking about a single line then you may just use the border-top and border-bottom property for that.
But if you are talking about the multiple line sentences then you may use a background which width is to be just 1px and height would be the line height of your paragraph has and the background should repeat then you'll see exactly what you want.
Since the effects of text-decoration apply only to the textual content of the element, the only way to make them stretch across the available width is to make the content that wide. This could be done with JavaScript code that appends no-break spaces until the width is exceeded, then trace back one space. In plain CSS, you need to use a long string of no-break spaces (hoping that it will be enough) as generated content and to suppress overflow:
.statistics_lines {
text-decoration: overline underline;
white-space: nowrap;
overflow: hidden;
}
.statistics_lines:after {
content: "\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0";
}
<div class=statistics_lines>this is my line</div>
Since overline and underline are too close to the letter glyphs in many ways, it is probably better to use upper and lower border instead, as suggested in other answers.
I'm aware that the :empty pseudo-class will select all elements with no children, but I want to only select elements with text-nodes as children.
I have a bottom-border on my hyperlinks that're a different color than the text, but this is a problem because the hyperlinked images are also getting this underline.
I've tried a *:not(*){ border-bottom-width: 0; } in an attempt to fix this, but it didn't work. Is there a way to select a tags with only text-nodes for children?
If I understand your problem correctly, you are trying to keep your hyperlinked images from being underlined. If so, why not do something like: a img { text-decoration:none }?
Edit: If its the links on img tags you don't want underlined, apply a class to those links with text-decoration:none
NEW ANSWER:
If you want a border under the image, but not the text do this:
a img { border-bottom: 1px solid #000; }
a:emtpy { border: none; }
If you want the opposite (border under the text but not the image) do this:
a:empty { border-bottom: 1px solid #000; }
a img { border: none; }
OLD ANSWER:
If it's just a problem with images that are wrapped in a tags, try:
a img { border-bottom: none; }
Instead of a crazy selector, why not hide the border with a negative margin:
a img {
margin-bottom: -6px;
}
Demo
When the ONLY CHILD of <a> is not an img ...
a:only-child:not(img)
{
border-bottom-width: 1;
}
This cannot be accomplished because of the way border property is applied and rendered outside the top-most box of your anchor - effectively the only way to achieve such an effect with a border would be to negate the property. Sometimes it coult be visually acceptable to use a bottom border in a background colour to overlay over that of of your anchor's - an unreliable practice to be frowned upon. Maybe the effect could be simulated with filters, but I wouldn't count on it being sufficiently well-supported cross-browser.
What I propose is going back to the text-decoration property *while still maintaining a different, independent underline colour` - a neat approach overall, but not without the overhead of an additional element:
<style>
.fancy-underline { color:blue; text-decoration:underline; }
.fancy-underline a { color:black; text-decoration:none; }
</style>
<span class="fancy-underline"><a href="#">I am a fancy link
<img src="//placekitten.com/30/30/" /> with an image in the middle of it
</a></span>
http://jsfiddle.net/ovfiddle/TwmmF/3/
I ended up just using jQuery. I don't believe it's possible with just CSS right now.
jQuery('document').ready(function(){
jQuery("a").each(function(){
if(this.children.length !== 0)
this.style.borderBottomWidth='0';
});
});
I'm trying to make a horizontal rule with some text in the left.
for example:
my title -------------------------------------
I can do it by putting a background to the text but without the colored background, I can not
Is anybody has an answer ?
<style>
h1 {
font-weight:normal;
line-height:0;
height:0;
border-bottom:1px solid #000;
vertical-align:middle;
}
</style>
<h1><span>my title</span></h1>
Thanks
Your suggestion of putting a background color on the span seems to work reasonably well. See it here.
Alternately, you could use a background image in place of the border on the h1.
h1 { background: url(http://i.stack.imgur.com/nomLz.gif) repeat-x left center; }
h1 span {
background-color: #FFF;
padding-right: 3px;
}
Example.
(A 1x1 black image for the background.1)
without using the background you could try with:
<style>
span:after{
content:"-------------------------------------";
}
</style>
<h1><span>my title</span></h1>
In this case you are using the CSS :after pseudo class.
Have a look to this article to check cross-browser compatibility.
And here you will find a pre-coded example.
Hope it helps!