How do you underline html text so that the line beneath the text is dotted rather than the standard underline? Preferably, I would like to do this without using a separate CSS file. I'm a novice at html.
It's impossible without CSS. In fact, the <u> tag is simply adding text-decoration:underline to the text with the browser's built-in CSS.
Here's what you can do:
<html>
<head>
<!-- Other head stuff here, like title or meta -->
<style type="text/css">
u {
border-bottom: 1px dotted #000;
text-decoration: none;
}
</style>
</head>
<!-- Body, content here -->
</html>
Use the following CSS codes...
text-decoration:underline;
text-decoration-style: dotted;
Without CSS, you basically are stuck with using an image tag. Basically make an image of the text and add the underline. That basically means your page is useless to a screen reader.
With CSS, it is simple.
HTML:
<u class="dotted">I like cheese</u>
CSS:
u.dotted{
border-bottom: 1px dashed #999;
text-decoration: none;
}
Running Example
Example page
<!DOCTYPE HTML>
<html>
<head>
<style>
u.dotted{
border-bottom: 1px dashed #999;
text-decoration: none;
}
</style>
</head>
<body>
<u class="dotted">I like cheese</u>
</body>
</html>
HTML5 element can give dotted underline so the beneath text will have dotted line rather than regular underline. And the title attribute creates a tool tip for the user when they hover their cursor over the element:
NOTE: The dotted border/underline is shown by default in Firefox and Opera, but IE8, Safari, and Chrome need a line of CSS:
<abbr title="Hyper Text Markup Language">HTML</abbr>
If the content has more than 1 line, adding a bottom border won't help. In that case you'll have to use,
text-decoration: underline;
text-decoration-style: dotted;
If you want more breathing space in between the text and the line, simply use,
text-underline-position: under;
Maybe I’m a bit late, but just use text-decoration: underline dotted,
it’s a single CSS property that you can use everywhere.
Inline HTML
<u style="text-decoration:underline dotted">I have a dotted underline</u>
For a dashed underline, use text-decoration: underline dashed.
<u style="text-decoration:underline dashed">I have a dashed underline</u>
As said by Darshana Gunawardana, you can use text-underline-position: under, to have more space between the text and the line:
<u style="text-decoration:underline dotted;text-underline-position:under">I have a dotted underline</u>
In a separate CSS file
u {
text-decoration: underline dotted;
}
You can make use of text-decoration properties:
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-line: underline;
text-decoration-thickness: 1px;
Reformatted the answer by #epascarello:
u.dotted {
border-bottom: 1px dashed #999;
text-decoration: none;
}
<!DOCTYPE html>
<u class="dotted">I like cheese</u>
You can use border bottom with dotted option.
border-bottom: 1px dotted #807f80;
You can try this method:
<h2 style="text-decoration: underline; text-underline-position: under; text-decoration-style: dotted">Hello World!</h2>
Please note that without text-underline-position: under; you still will have a dotted underline but this property will give it more breathing space.
This is assuming you want to embed everything inside an HTML file using inline styling and not to use a separate CSS file or tag.
It's not impossible without CSS. For example as a list item:
<li style="border-bottom: 1px dashed"><!--content --></li>
Related
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.
My HTML code is:
settings
The element does not lies directly under the body tag.
Now i have a situation where i need To underline anchor tag text using CSS, to do it i am using the following css code:
a{ border-bottom: solid 1px #eee;}
However this only underlines the text enclosed in anchor tag. What if want the underline to go across the page?
This is what you might want to do:
a {
border-bottom: solid 1px red;
display: block;
}
settings
I have a style like:
a {border-bottom: 1px solid gray; text-decoration: none}
Now if I put an <img> inside a <a>, the <img> gets the border too. Is there a way to prevent this?
a img {border:0} doesn't work because a has the border, not img. Fiddle: http://jsfiddle.net/wp480vdv/1/
Adding classes to either have a border or not is difficult for large sites.
You can use JQuery to do this
Solution 1: http://jsfiddle.net/wp480vdv/8/
$('a').has('img').css('border-bottom', 'none');
Solution 2 http://jsfiddle.net/wp480vdv/9/
$("a:not(:has(>img))").css('border-bottom', '1px solid gray');
A selection based on the content is not supported in CSS; and i doubt it will always be.
The nearer thing you can do, without Javascript is the attribute selector:
a {border-bottom: 1px solid gray; text-decoration: none}
a[href="/foo"] {border:0px}
http://jsfiddle.net/wp480vdv/10/
Might it be something in the attribute of the <a> that contains image different from the <a> containing only text?
If you only want to give underline for text not for image, then you don't need to give border-bottom for <a> tag.
You can modify your html like that.
html
<div>
<a>
<span>hello</span>
<img src="a.jpg">
</a>
</div>
Here by default in <a> tag, there is underline.
So if use a{text-decoration:none;} so why you want to give border-bottom.
Anyway if want to give border-bottom for text then you can do like that.
css
a {
/*border-bottom: 1px solid gray;*/
text-decoration: none
}
span {
border-bottom: 1px solid gray;
}
img {
border: none;
}
I have to create a page without using a CSS sheet, simply in-line styling. The only internal styles I can have are:
<style>
body {
padding: 20px 20px 20px 20px;
background: url("http://ics.actonhighschool.ca/test/images/fence.jpg");
color: #333333; /* font color */
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
</style>
For one of the links I have, this is the code I have:
<p>This is the second paragraph. It is also short and boring. Let's create a
link to the <a href="http://www.w3schools.com/tags/default.asp"
onmouseover="this.style.textDecoration='none';
this.style.backgroundColor='#9400d3'; this.style.color='#ffffff';"
onmouseout="this.style.textDecoration='underline';
this.style.color='#3e3e3e'; this.style.backgroundColor='';"><span
style="color: #3e3e3e">
HTML Quick Reference List</span></a></p>
However, on the page loadup, although the link comes up as the color #3e3e3e, the underline on the link is a different color. After the "onmouseout" event is triggered though, the underline matches the color of the text. How can I fix this without using a style or CSS?
Add the styling to the <a> tag, not to the text inside it:
<p>This is the second paragraph. It is also short and boring. Let's create a
link to the <a style="color: #3e3e3e" href="http://www.w3schools.com/tags/default.asp"
onmouseover="this.style.textDecoration='none';
this.style.backgroundColor='#9400d3'; this.style.color='#ffffff';"
onmouseout="this.style.textDecoration='underline';
this.style.color='#3e3e3e'; this.style.backgroundColor='';">
HTML Quick Reference List</a></p>
FIDDLE
This is how to use css to do it. You can use this to add the needed styles with javascript.
a:link {
color: red;
text-decoration: none;
border-bottom: 1px solid blue;
}
From the picture you posted, it is the default a:visited underline state, and you aren't catching it in the code you wrote:
Try:
a:visited, a:link, a:active {
color: #3E3E3E
text-decoration:none;
border-bottom: 2px solid black
}
I am looking for a way to enlarge the distance between the text and underline on my pages. i use mainly CSS but i had to use tags as well, basicly my question considers both cases. is there a way to change this spacing? the code is pretty simple:
.title_span {
font-weight: bold;
text-decoration: underline;
color: grey;
}
my other posibility is try somehow use background for the span using 1px picture and repeat against X axis i am looking for cleaner solution.
Not without tricks, no. One simple solution is to wrap the text in another span and give that a bottom border.
<span class="underline"><span class="title_span">title of something</span></span>
.title_span {
font-weight: bold;
text-decoration: underline;
color: grey;
}
.underline {
padding-bottom: 2px;
border-bottom: grey 1px solid;
}
http://jsfiddle.net/m9RQ9/
spacing between text and underline its No, but you could go with something like border-bottom: 1px solid #000 and padding-bottom: 3px.
edit: 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.
I'm afraid this isn't possible per se, but what you can do is apply a border-bottom as an alternative to background-image