I have a header that is underlined using text-decoration: underline; The only problem is the line is too thin. I would like to make only the underline thicker. I have considered using border-bottom to do this but the border stretches the full width of the container and the text is centered. Doesn't work.
You can wrap the text with <span> tags around, using display: inline-block;, remove text-decoration: underline; property and add border-bottom: 2px solid #000;
Demo
Note: Why use inline-block? So that you can also control the spacing
between the border and the text, using padding or margins, but if you don't require
display: inline-block; you can simply get rid of it as NullPoiиteя said. Also, be sure to use a class on the parent element to select particular span tag of a particular element.class pair.
Long ago, there was the property text-underline-width in the CSS3 Text Module CR, defined to specify the thickness. However, it was not implemented in browsers, and it was dropped in the 2005 version of the module. This indirectly shows that it is not possible to set the underline width in CSS.
As regards to using border-bottom instead of a text-decoration: underline, it’s a different property, with different effect (the border is in an essentially lower position), and there are many existing questions on how to make it just as narrow as the text, which seems to be the issue here. But the simplest way is to use some inline (text-level) markup that spans the text in your heading, e.g.
<h1><u>Your heading text</u></h1>
with e.g.
u { text-decoration: none; border-bottom: 0.2em solid }
Instead of u, you could use e.g. the span element, but u has the advantage of producing at least a simple underline even when CSS styling is disabled in the browser. Using u, you of course need to switch off its default underlining, to avoid getting both underline and bottom border.
try this style
<h1 style="border-bottom: 5px solid black">This is heading 1</h1>
DEMO
Related
According to MDN, outline should work on the ::selection pseudoelement, yet it doesn't seem to when tested on both chrome and ff.
::selection {
background-color:red;
outline:2px dashed blue;
}
My cool text, select me!
I'm creating a text editor and basically it just annoys me how tight fitting the selection background color is. I want to expand it a few pixels and outline would be the right attribute for the job but it doesn't work?
I think the MDN is wrong or not updated, because if we refer to the specification:
The highlight pseudo-elements can only be styled by a limited set of properties that do not affect layout. The following properties apply to the highlight pseudo-elements:
color
background-color
cursor
caret-color
text-decoration and its associated properties
text-shadow
stroke-color, fill-color, and stroke-width
The outline isn't listed which explain why it's not working. Also I don't think you can control the hightlighting area. As explained in the same specification:
For text, the corresponding overlay must cover at least the entire em box and may extend further above/below the em box to the line box edges. Spacing between two characters may also be part of the overlay area, in which case it belongs to the innermost element that contains both characters and is selected when both characters are selected.
We already have the em box which is trivial and your best luck is to have more in case the line box is higher but it will not behave the same cross browser.
Here is a basic example where I use a pseudo element with a big font-size to increase the height of the line-box and I align it in the middle. In this case the selection will cover more than the text but of course this will also affect the layout which is probably not needed and will not work with all the browser.
The below example works on Chrome and doesn't on Fiferfox
p:after {
content: "";
font-size: 30px;
vertical-align: middle;
}
p::selection {
background-color: red;
}
<p>My cool text, select me!</p>
Another important thing is that all the properties applied inside that area cannot overflow it. We know that with text-shadow we can place the shadow far from the text but with the selection it won't be possible because it cannot overflow the hightlighting area:
p {
text-shadow:0 10px 0 red;
}
p::selection {
background-color: red;
text-shadow:0 -10px 0 blue;
}
<p>My cool text, select me!</p>
Notice how the blue text-shadow is partially visible like we have applied overflow:hidden to the red area. So even if you are able to style the selection with outline it's basically impossible to control its dimension which is what you need here.
I think your best option is to rely on JS to create dynamic element or wrap selected text to easily style them. With the CSS, you can only apply some hack that will affect your layout.
Outside the first line, the other line is valid with line-height. As you can see:
div {
line-height:30px;
}
div::selection {
background: yellow;
}
<div>text<br />text<br />text</div>
So, I did a Javascript trick that added the first line for us. I'm also giving font-size: 0px for the first line. So our problem is solved. As you can see:
let a = document.querySelectorAll(".a");
a.forEach(function(par){
par.insertAdjacentHTML('afterbegin','needed text<br />')
})
// for an unseen first line.
.a {
line-height:50px;
}
.a::selection {
background: yellow;
}
.a::first-line {
font-size:0px;
line-height:0px;
}
<div class="a">text</div>
I have an anchor tag, and I'm using the :before selector to add some text. I have added a hover state around the anchor tag. The :before text is slightly larger than the rest of the text in the anchor tag and I'm adding a display: inline-block property to the before text.
When I hover over the anchor tag, the hover state is wrapped tightly around the all the anchor text, including the :before text (EXAMPLE 1 in codepen). Like so:
https://user-images.githubusercontent.com/20184809/52691191-27364e80-2fb4-11e9-9ffe-8777e645acee.png
How ever if I add the display:inline-block property to the anchor tag the hover state is a rectangle which matches the height of the larger :before text. Like so:
https://user-images.githubusercontent.com/20184809/52691272-7da38d00-2fb4-11e9-900b-c795623de3e2.png
Why is this?
.link-1:hover, .link-2:hover {
outline: 3px solid green;
outline-offset: 2px;
}
.link:before {
content:':before text';
font-size: 35px;
display: inline-block;
}
.link-1 {
display: inline-block;
}
<!-- EXAMPLE 2 -->
anchor text
<br>
<!-- EXAMPLE 1 -->
anchor text
EDIT:
I've noticed this happens on Chrome and not Safari and firefox. It could be a browser thing?
From the specification we can read:
Outlines may be non-rectangular. For example, if the element is broken across several lines, the outline is the minimum outline that encloses all the element's boxes. In contrast to borders, the outline is not open at the line box's end or start, but is always fully connected if possible.
And
The outline may be drawn starting just outside the border edge.
For the second example, when making the element inline-block we will have the below
.link-1:hover, .link-2:hover {
outline: 3px solid green;
outline-offset: 2px;
}
.link:before {
content:':before text';
font-size: 35px;
display: inline-block;
}
.link-1 {
display: inline-block;
border:1px solid;
}
anchor text
It's clear that the outline need to at least surround the border and it will be the same for all the browser.
But for the first example we will have this:
.link-1:hover, .link-2:hover {
outline: 3px solid green;
outline-offset: 2px;
}
.link:before {
content:':before text';
font-size: 35px;
display: inline-block;
}
.link,
.link:before{
border:1px solid;
}
<!-- EXAMPLE 2 -->
anchor text
It seems that Chrome in this case is following the borders to draw the outline and is respecting the Specification by keeping it connected. The result is somehow logical but other browser aren't doing the same. I won't say if Firefox is doing wrong but both result are fine and doesn't violate the specification.
In both cases we have :
The minimum outline that encloses all the element's boxes
Always fully connected if possible
May be drawn starting just outside the border edge
There are two types of HTML elements. Inline and Block elements. Block elements take up the full width available to them(With exception of inline blocks, will come back to these). Inline elements only take up as much space as they need, i.e they try to be as small as possible. So just the space around their outer border. When you add display: inline-block you turn the whole thing into a block which is why it becomes rectangular. The difference with inline-blocks is that they also take up as much space as they need but they are also fully rectangular. Check out this answer too CSS display: inline vs inline-block
I am aware of the line-height property and all the fun we can have with it, but is it possible to adjust line spacing some other way?
In Adobe InDesign, for example, line height and line spacing are two separate properties that can be adjusted independently.
I'm working on a design right now using a very nice Garamond, but setting the line-height to a nice legible level also makes things like links and underlines look very ugly. Plain underlines with text-decoration look fine, but ideally I would like to be able to make the underlines more visually stunning and interactive, like on HuffPost's website. They are using a box-shadow. Box shadow, bottom border, anything like that will snap to the bottom of the line's height.
Can we have both with CSS?
EXAMPLE:
Normal underline using text-decoration: underline;
Border "underline" using border-bottom: 1px solid $special-blue;
Seems way too far below the text, in my opinion. Even with a moderately conservative line-height of 1.4rem
I found this solution, where you can set the line-height to 1 for that particular element. This resets line-height for that element, but doesn't affect anything else in that line.
by doing like this,
p.new a{
text-decoration: none;
display:inline-block;
border-bottom:1px solid green;
line-height:1;
}
JS Fiddle
I believe there are no two different properties for line height and spacing.
I have the following class in my CSS style sheet:
.errormsg {
border:solid 1px Red;
padding:5px 20px 5px 20px;
margin:5px;
color:Red;
font-size:medium;
font-weight:bold;
}
When I view it in IE7, the top and bottom border is cut off the when I use this class on a span tag.
What do I need to add to get it to work in IE7?
I've noticed similar issues with this sort of thing when the Line Height is not large enough. Try increasing it slightly.
<pan> elements are going to be treated as inline elements unless you specify otherwise. Add display: block; to your CSS and go from there. The alternative would be to use a <div> to wrap the error message, since <div>s are treated as block elements by default.
Setting display: inline-block; on the <div> will fix the display issues, and the width will still adapt to the text size:
Demo
You could also spruce it up a little with a css3 text-shadow, box-shadow, and gradient with an icon from iconfinder: Demo
I have a question. In the following url I have a set of h1,h2 and p elements with their respective css styling. The h1 element has text-decoration underline.
http://nostalgia.mx/light2.html
Open the site with both firefox+ie and chrome and you'll notice the profound differences:
1.- firefox+ie make the underline proportional to the fontsize of the element being underlined, which is very smart. Google keeps it thin and un-proportional.
2.- firefox+ie 'fuse' or 'meld' the text itself with the underline so the silhouette is one single piece, which is very nice. Chrome on the other hand does not.
OK. So my question is:
Is it possible to make Chrome's look like FF/IE's?
Regards
Sotkra
The phenomenon can be observed in a simple setting where you just have an element with a large font size and you set text-decoration: underline on it. Browsers implement this in different ways regarding the width of the underline. There is no way to affect this in CSS. The CSS3 Text draft has nothing about this, even though it has properties for affecting other features of underlining. In discussions, a property for setting underline has been proposed.
If you wish to simulate underlining by using border-bottom, you can, with some extra complications in markup and CSS, set the width (and color and position). Example:
Heading
with style
h1 { font-size: 150px; }
h1 { border-bottom: solid 0.05em; display: inline-block; }
h1 span { position: relative; top: 0.2em; }
Demo: http://jsfiddle.net/yucca42/Qdeek/
In this approach, you would need to take care of setting the heading on one line and using suitable top and bottom margins (probably with settings on other elements, maybe wrapping the element inside a div container), since display: inline-block removes normal heading rendering style.