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
Related
I have two buttons on my web page which look as follows...
The button on the left has the correct style border; thin and with no rounded corners.
The button on the right, which currently has focus, does not have the correct style border. When Inspecting the element within chrome, it has the following properties...
element.style {
position: absolute;
bottom: 25px;
border: none !important;
right: 140px;
}
.btn:focus {
border-radius: 0px;
}
.btn-primary.focus, .btn-primary:focus {
color: #fff;
background-color: #286090;
}
.btn.focus, .btn:focus, .btn:hover {
text-decoration: none;
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
I would have thought that applying the border: none !important css property (while the element was forced into a focus state would have worked, but apparently not.
Furthermore, even when I set the border-color to yellow while the button is focused, this effect is not applied.
How can I prevent the border from being rounded off, so that it stays square and the corners remain a 90 degree angle?
What you see as an outline.
Just add this line to the button's css:
outline: none !important;
The purpose of the outline is accessabilty, so you should think carefully about removing it. You can always change the way the border looks instead.
As for !important, if you write your css right, you shouldn't use it. Inline css (style='color: blue') supercedes classes and id styling, so in your case the !important might be redundant.
There will be a lot of suggestions to remove the outline.
Before You decide to do so, please note that it'a a really bad practice from the accesibility point of view
https://medium.com/better-programming/a11y-never-remove-the-outlines-ee4efc7a9968
Pretty new to CSS and i just want to change the defualt outline colour of a button. I beleive im using bootstrap
So far i can change the button colour when the mouse hovers over it, and also the default text colour but not the outline
Ive tried this
.btn-outline-info{
color: #ea4335;
outline-color: #ea4335;
}
the color part works but the outline-color does not
Any help would be appreciated thanks
Try border-color
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.btn-outline-info {
color: blue;
border-color: red;
}
.btn-outline-info:hover {
color: green;
border-color: purple;
}
</style>
<button class="btn btn-outline-info">Info</button>
I think you need to add an outline style. For example,
outline-style: solid;
outline-color: #92a8d1;
.btn:active {
outline-color: red;
}
:active is when the button is being hovered
This adds the outline style and color on focus:
.btn-outline-info:focus {
outline-style: solid;
outline-color: #ea4335;
}
In CSS it's important to remember that like in HTML and javascript, the computer won't do what you want it to do, it only does what it has to do. It doesn't know what the CSS property outline-colour is, so it does nothing.
Do make an outline of a button, you use border-color: (color). Or you could add a specified border using, border: 3px solid green; there are many changes you can make with borders. To have a full explanation, head to the W3 schools site. https://www.w3schools.com/cssref/pr_border.asp
And then on hover, you could do this,
button:hover {
border: 2px dotted blue;
color: purple;
}
Also In the future, this kind of question doesn't need a whole discussion on stack overflow, it can be easily researched and troubleshooted!
Cheers
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 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/
For reasons explained below, I am using relative positioning on <span> inside <a> in order to slightly change the position of the text wrapped with <span> (to place it 2px higher than it's placed automatically). When I do this, obviously, the text-decoration: underline; is broken and below my <span> it is also starting 2px higher. Please see the fiddle: http://jsfiddle.net/8qL934xv/
I would like know, if there is a way to make the <a> underline run below the <span> as well, unbroken and preferably with HTML/CSS only.
How I came across this problem:
I am building a bilingual website, where sometimes English words are still in secondary language content. In these cases I wrap these words with <span lang="en"> and apply corresponding font-family this way:
* [lang="en"]
{
font-family: 'Ropa Sans', helvetica;
}
However, the font-family I use for my secondary language headings and 'Ropa Sans' do not look nice next to each other and they appear as if "not sitting" on the same line. To fix this, I had been using relative positioning on my <span>-s. For example:
h1 span {
position: relative;
top: -2px;
}
This solution worked just fine, before I realized that it messes up with the underline when applied to links. I could avoid using text-decorations on links like these, but I would prefer to know if there is some simple CSS solution that I was not able to identify.
This isn't possible, but you could do something like
a {
display: block;
border-bottom: 1px solid transparent;
text-decoration: none;
}
a:hover {
text-decoration: none;
border-bottom: 1px solid blue;
display: inline-block;
}
This works.